Refactor: Implement desktop layout modernization

This commit is contained in:
gpt-engineer-app[bot]
2025-10-14 20:16:24 +00:00
parent 2eec20f653
commit b8f2889b1d
6 changed files with 387 additions and 302 deletions

View File

@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Card, CardContent, CardDescription, CardHeader } from '@/components/ui/card';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { Switch } from '@/components/ui/switch';
import { Skeleton } from '@/components/ui/skeleton';
@@ -304,16 +304,17 @@ export function LocationTab() {
}
return (
<div className="space-y-8">
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<div className="space-y-4">
<div className="flex items-center gap-2">
<MapPin className="w-5 h-5" />
<h3 className="text-lg font-medium">Location Settings</h3>
</div>
<div className="space-y-6">
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
{/* Location Settings + Personal Information Grid */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Location Settings */}
<Card>
<CardHeader>
<div className="flex items-center gap-2">
<MapPin className="w-5 h-5" />
<CardTitle>Location Settings</CardTitle>
</div>
<CardDescription>
Set your location for better personalized content and timezone display.
</CardDescription>
@@ -425,18 +426,14 @@ export function LocationTab() {
</div>
</CardContent>
</Card>
</div>
<Separator />
<div className="space-y-4">
<div className="flex items-center gap-2">
<Calendar className="w-5 h-5" />
<h3 className="text-lg font-medium">Personal Information</h3>
</div>
{/* Personal Information */}
<Card>
<CardHeader>
<div className="flex items-center gap-2">
<Calendar className="w-5 h-5" />
<CardTitle>Personal Information</CardTitle>
</div>
<CardDescription>
Optional personal information that can be displayed on your profile.
</CardDescription>
@@ -462,16 +459,15 @@ export function LocationTab() {
</Card>
</div>
<Separator />
<div className="space-y-4">
<div className="flex items-center gap-2">
<Ruler className="w-5 h-5" />
<h3 className="text-lg font-medium">Units & Measurements</h3>
</div>
{/* Unit Preferences + Accessibility Options Grid */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Unit Preferences */}
<Card>
<CardHeader>
<div className="flex items-center gap-2">
<Ruler className="w-5 h-5" />
<CardTitle>Units & Measurements</CardTitle>
</div>
<CardDescription>
Choose your preferred measurement system for displaying distances, speeds, and other measurements.
</CardDescription>
@@ -499,18 +495,14 @@ export function LocationTab() {
</div>
</CardContent>
</Card>
</div>
<Separator />
<div className="space-y-4">
<div className="flex items-center gap-2">
<Accessibility className="w-5 h-5" />
<h3 className="text-lg font-medium">Accessibility Options</h3>
</div>
{/* Accessibility Options */}
<Card>
<CardHeader>
<div className="flex items-center gap-2">
<Accessibility className="w-5 h-5" />
<CardTitle>Accessibility Options</CardTitle>
</div>
<CardDescription>
Customize the interface to meet your accessibility needs.
</CardDescription>
@@ -564,6 +556,7 @@ export function LocationTab() {
</Card>
</div>
{/* Save Button */}
<div className="flex justify-end">
<Button type="submit" disabled={saving}>
{saving ? 'Saving...' : 'Save Settings'}