pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-24 22:11:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Implement desktop layout modernization

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

76
src/pages/UserSettings.tsx
View File

@@ -83,58 +83,48 @@ export default function UserSettings() {
<div className="min-h-screen bg-background">
<Header />
<div className="container mx-auto px-4 py-8">
<div className="max-w-6xl mx-auto">
{/* Header */}
<div className="flex items-center gap-3 mb-8">
<Settings className="w-8 h-8 text-primary" />
<div>
<h1 className="text-3xl font-bold">Settings</h1>
<p className="text-muted-foreground">Manage your account preferences and privacy settings</p>
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="flex items-center gap-3 mb-8">
<Settings className="w-8 h-8 text-primary" />
<div>
<h1 className="text-3xl font-bold">Settings</h1>
<p className="text-muted-foreground">Manage your account preferences and privacy settings</p>
</div>
</div>
</div>
{/* Settings Tabs */}
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
<TabsList className="grid w-full grid-cols-2 lg:grid-cols-6 h-auto p-1">
{/* Settings Tabs */}
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
<TabsList className="grid w-full grid-cols-2 lg:grid-cols-6 h-auto p-1">
{tabs.map((tab) => {
const Icon = tab.icon;
return (
<TabsTrigger
key={tab.id}
value={tab.id}
className="flex flex-col sm:flex-row items-center gap-2 h-auto py-3 px-2 text-xs sm:text-sm"
>
<Icon className="w-4 h-4" />
<span className="hidden sm:inline lg:inline">{tab.label}</span>
<span className="sm:hidden lg:hidden">{tab.label.split(' ')[0]}</span>
</TabsTrigger>
);
})}
</TabsList>
{tabs.map((tab) => {
const Icon = tab.icon;
const Component = tab.component;
return (
<TabsTrigger
<TabsContent
key={tab.id}
value={tab.id}
className="flex flex-col sm:flex-row items-center gap-2 h-auto py-3 px-2 text-xs sm:text-sm"
className="focus-visible:outline-none"
>
<Icon className="w-4 h-4" />
<span className="hidden sm:inline lg:inline">{tab.label}</span>
<span className="sm:hidden lg:hidden">{tab.label.split(' ')[0]}</span>
</TabsTrigger>
<Component />
</TabsContent>
);
})}
</TabsList>
{tabs.map((tab) => {
const Component = tab.component;
return (
<TabsContent
key={tab.id}
value={tab.id}
className="space-y-6 focus-visible:outline-none"
>
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<tab.icon className="w-5 h-5" />
{tab.label}
</CardTitle>
</CardHeader>
<CardContent>
<Component />
</CardContent>
</Card>
</TabsContent>
);
})}
</Tabs>
</Tabs>
</div>
</div>
</div>