feat: move units search and category select to a row below description

- Relocate SearchUnits and Category Select into a dedicated row at the top of MainConverter
- Remove them from the converter card header for a cleaner layout
- Update vertical spacing for better visual hierarchy
This commit is contained in:
2026-02-23 08:09:51 +01:00
parent 93bbc2ef22
commit 3a100f8fde

View File

@@ -111,24 +111,20 @@ export default function MainConverter() {
}, [selectedUnit]); }, [selectedUnit]);
return ( return (
<div className="w-full space-y-6"> <div className="w-full space-y-8">
{/* Command Palette */} {/* Command Palette */}
<CommandPalette <CommandPalette
onSelectMeasure={setSelectedMeasure} onSelectMeasure={setSelectedMeasure}
onSelectUnit={handleSearchSelect} onSelectUnit={handleSearchSelect}
/> />
{/* Main Converter Card */} {/* Quick Access Row */}
<Card> <div className="flex flex-col md:flex-row md:items-center gap-4 justify-between bg-card p-4 rounded-lg border">
<CardHeader className="pb-4 border-b"> <div className="flex-1">
<div className="flex flex-col md:flex-row md:items-center gap-4 justify-between">
<CardTitle className="shrink-0">Convert {formatMeasureName(selectedMeasure)}</CardTitle>
<div className="flex-1 max-w-md">
<SearchUnits onSelectUnit={handleSearchSelect} /> <SearchUnits onSelectUnit={handleSearchSelect} />
</div> </div>
<div className="w-full md:w-48 shrink-0"> <div className="w-full md:w-64 shrink-0">
<Select <Select
value={selectedMeasure} value={selectedMeasure}
onChange={(e) => setSelectedMeasure(e.target.value as Measure)} onChange={(e) => setSelectedMeasure(e.target.value as Measure)}
@@ -145,8 +141,13 @@ export default function MainConverter() {
</Select> </Select>
</div> </div>
</div> </div>
{/* Main Converter Card */}
<Card>
<CardHeader>
<CardTitle>Convert {formatMeasureName(selectedMeasure)}</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-6 pt-6"> <CardContent className="space-y-6 pt-0">
<div className="flex gap-2 items-end"> <div className="flex gap-2 items-end">
<div className="flex-1"> <div className="flex-1">
<label className="text-sm font-medium mb-2 block">Value</label> <label className="text-sm font-medium mb-2 block">Value</label>