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

refactor: streamline, refine and polish

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-27 12:35:02 +01:00
parent efe3c81576
commit ee7e5ec06c
21 changed files with 606 additions and 735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
components/units/MainConverter.tsx
View File

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from 'react';
import { ArrowLeftRight, BarChart3 } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import {
Select,
@@ -90,16 +91,15 @@ export default function MainConverter() {
}, [selectedUnit]);
return (
<div className="w-full space-y-8">
<div className="w-full space-y-6">
{/* Quick Access Row */}
<Card>
<CardContent className="flex flex-col md:flex-row md:items-center gap-4 justify-between">
<CardContent className="flex flex-col md:flex-row md:items-center gap-3 justify-between">
<div className="flex-1">
<SearchUnits onSelectUnit={handleSearchSelect} />
</div>
<div className="w-full md:w-64 shrink-0">
<div className="w-full md:w-56 shrink-0">
<Select
value={selectedMeasure}
onValueChange={(value) => setSelectedMeasure(value as Measure)}
@@ -124,12 +124,10 @@ export default function MainConverter() {
<CardHeader>
<CardTitle>Convert {formatMeasureName(selectedMeasure)}</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
{/* Input row, stacks vertically on mobile, horizontal on desktop */}
<div className="flex flex-col gap-4 md:flex-row md:items-end md:gap-2">
{/* Value Input */}
<CardContent className="space-y-4">
<div className="flex flex-col gap-3 md:flex-row md:items-end md:gap-2">
<div className="flex-1 w-full">
<label className="text-sm font-medium mb-2 block">Value</label>
<Label className="text-xs mb-1.5">Value</Label>
<Input
type="text"
inputMode="decimal"
@@ -139,9 +137,8 @@ export default function MainConverter() {
className={cn("text-lg", "w-full", "max-w-full")}
/>
</div>
{/* From Unit Select */}
<div className="w-full md:w-40">
<label className="text-sm font-medium mb-2 block">From</label>
<div className="w-full md:w-36">
<Label className="text-xs mb-1.5">From</Label>
<Select
value={selectedUnit}
onValueChange={(value) => setSelectedUnit(value)}
@@ -158,19 +155,17 @@ export default function MainConverter() {
</SelectContent>
</Select>
</div>
{/* Swap Button */}
<Button
variant="outline"
size="icon"
size="icon-xs"
onClick={handleSwapUnits}
className="flex-shrink-0 w-full md:w-40" // Make button full width on mobile too
className="shrink-0 w-full md:w-7"
title="Swap units"
>
<ArrowLeftRight className="h-4 w-4" />
<ArrowLeftRight className="h-3.5 w-3.5" />
</Button>
{/* To Unit Select */}
<div className="w-full md:w-40">
<label className="text-sm font-medium mb-2 block">To</label>
<div className="w-full md:w-36">
<Label className="text-xs mb-1.5">To</Label>
<Select
value={targetUnit}
onValueChange={(value) => setTargetUnit(value)}
@@ -189,12 +184,11 @@ export default function MainConverter() {
</div>
</div>
{/* Quick result */}
{parseNumberInput(inputValue) !== null && (
<div className="p-4 rounded-lg bg-accent/50 border-l-4 border-primary">
<div className="text-sm text-muted-foreground">Result</div>
<div className="text-3xl font-bold mt-1 text-primary">
{formatNumber(convertUnit(parseNumberInput(inputValue)!, selectedUnit, targetUnit))} {targetUnit}
<div className="p-3 rounded-lg bg-primary/5 border border-primary/15">
<div className="text-xs text-muted-foreground mb-0.5">Result</div>
<div className="text-2xl font-bold text-primary tabular-nums">
{formatNumber(convertUnit(parseNumberInput(inputValue)!, selectedUnit, targetUnit))} <span className="text-base font-medium text-muted-foreground">{targetUnit}</span>
</div>
</div>
)}
@@ -208,11 +202,11 @@ export default function MainConverter() {
<CardTitle>All Conversions</CardTitle>
<Button
variant="outline"
size="sm"
size="xs"
onClick={() => setShowVisualComparison(!showVisualComparison)}
>
<BarChart3 className="h-4 w-4 mr-2" />
{showVisualComparison ? 'Grid View' : 'Chart View'}
<BarChart3 className="h-3 w-3 mr-1" />
{showVisualComparison ? 'Grid' : 'Chart'}
</Button>
</div>
</CardHeader>
@@ -223,25 +217,17 @@ export default function MainConverter() {
onValueChange={handleValueChange}
/>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{conversions.map((conversion) => {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
{conversions.map((conversion) => (
<div
key={conversion.unit}
className="group relative p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors border-l-4 border-l-primary/30"
className="p-3 rounded-lg border border-border/50 hover:border-primary/30 transition-colors"
>
<div className="text-sm text-muted-foreground mb-1">
{conversion.unitInfo.plural}
</div>
<div className="text-2xl font-bold">
{formatNumber(conversion.value)}
</div>
<div className="text-sm text-muted-foreground mt-1">
{conversion.unit}
</div>
<div className="text-xs text-muted-foreground">{conversion.unitInfo.plural}</div>
<div className="text-lg font-bold tabular-nums mt-0.5">{formatNumber(conversion.value)}</div>
<div className="text-xs text-muted-foreground">{conversion.unit}</div>
</div>
);
})}
))}
</div>
)}
</CardContent>