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