refactor: use Card, CardTitle and CardContent in Figlet and Units apps
This commit is contained in:
@@ -120,34 +120,36 @@ export default function MainConverter() {
|
||||
<div className="w-full space-y-8">
|
||||
|
||||
{/* 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>
|
||||
<Card>
|
||||
<CardContent className="flex flex-col md:flex-row md:items-center gap-4 justify-between pt-6">
|
||||
<div className="flex-1">
|
||||
<SearchUnits onSelectUnit={handleSearchSelect} />
|
||||
</div>
|
||||
|
||||
<div className="w-full md:w-64 shrink-0">
|
||||
<Select
|
||||
value={selectedMeasure}
|
||||
onValueChange={(value) => setSelectedMeasure(value as Measure)}
|
||||
>
|
||||
<SelectTrigger
|
||||
className="w-full"
|
||||
style={{
|
||||
borderLeft: `4px solid ${getCategoryColorHex(selectedMeasure)}`,
|
||||
}}
|
||||
<div className="w-full md:w-64 shrink-0">
|
||||
<Select
|
||||
value={selectedMeasure}
|
||||
onValueChange={(value) => setSelectedMeasure(value as Measure)}
|
||||
>
|
||||
<SelectValue placeholder="Measure" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{measures.map((measure) => (
|
||||
<SelectItem key={measure} value={measure}>
|
||||
{formatMeasureName(measure)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<SelectTrigger
|
||||
className="w-full"
|
||||
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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Main Converter Card */}
|
||||
<Card>
|
||||
|
||||
Reference in New Issue
Block a user