valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update UI component usage to match latest shadcn APIs

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-24 16:20:35 +01:00
parent bf4729fa4d
commit 9c6b184f7e
40 changed files with 4463 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
components/units/converter/MainConverter.tsx
View File

@@ -2,10 +2,16 @@
import { useState, useEffect, useCallback } from 'react';
import { Copy, Star, Check, ArrowLeftRight, BarChart3 } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/Button';
import { Select } from '@/components/ui/Select';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import SearchUnits from './SearchUnits';
import VisualComparison from './VisualComparison';
import CommandPalette from '@/components/units/ui/CommandPalette';
@@ -127,17 +133,23 @@ export default function MainConverter() {
<div className="w-full md:w-64 shrink-0">
<Select
value={selectedMeasure}
onChange={(e) => setSelectedMeasure(e.target.value as Measure)}
className="h-10 text-sm"
style={{
borderLeft: `4px solid ${getCategoryColorHex(selectedMeasure)}`,
}}
onValueChange={(value) => setSelectedMeasure(value as Measure)}
>
{measures.map((measure) => (
<option key={measure} value={measure}>
{formatMeasureName(measure)}
</option>
))}
<SelectTrigger
className="h-10 text-sm"
style={{
borderLeft: `4px solid ${getCategoryColorHex(selectedMeasure)}`,
}}
>
<SelectValue placeholder="Measure" />
</SelectTrigger>
<SelectContent>
{measures.map((measure) => (
<SelectItem key={measure} value={measure}>
{formatMeasureName(measure)}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
@@ -167,13 +179,18 @@ export default function MainConverter() {
<label className="text-sm font-medium mb-2 block">From</label>
<Select
value={selectedUnit}
onChange={(e) => setSelectedUnit(e.target.value)}
onValueChange={(value) => setSelectedUnit(value)}
>
{units.map((unit) => (
<option key={unit} value={unit}>
{unit}
</option>
))}
<SelectTrigger>
<SelectValue placeholder="From" />
</SelectTrigger>
<SelectContent>
{units.map((unit) => (
<SelectItem key={unit} value={unit}>
{unit}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* Swap Button */}
@@ -191,13 +208,18 @@ export default function MainConverter() {
<label className="text-sm font-medium mb-2 block">To</label>
<Select
value={targetUnit}
onChange={(e) => setTargetUnit(e.target.value)}
onValueChange={(value) => setTargetUnit(value)}
>
{units.map((unit) => (
<option key={unit} value={unit}>
{unit}
</option>
))}
<SelectTrigger>
<SelectValue placeholder="To" />
</SelectTrigger>
<SelectContent>
{units.map((unit) => (
<SelectItem key={unit} value={unit}>
{unit}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>