elmeg-demo/frontend/app/settings/page.tsx

74 lines
3.2 KiB
TypeScript

"use client"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { usePreferences } from "@/contexts/preferences-context"
export default function SettingsPage() {
const { preferences, updatePreferences, loading } = usePreferences()
if (loading) {
return <div>Loading settings...</div>
}
return (
<div className="max-w-2xl mx-auto space-y-6">
<h1 className="text-3xl font-bold tracking-tight">Settings</h1>
<Card>
<CardHeader>
<CardTitle>Preferences</CardTitle>
<CardDescription>
Customize your browsing experience.
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="flex items-center justify-between space-x-2">
<div className="space-y-0.5">
<Label htmlFor="wiki-mode">Wiki Mode</Label>
<p className="text-sm text-muted-foreground">
Hide all social features (comments, ratings, reviews) for a pure archive experience.
</p>
</div>
<Switch
id="wiki-mode"
checked={preferences.wiki_mode}
onCheckedChange={(checked) => updatePreferences({ wiki_mode: checked })}
/>
</div>
<div className="flex items-center justify-between space-x-2">
<div className="space-y-0.5">
<Label htmlFor="show-ratings">Show Ratings</Label>
<p className="text-sm text-muted-foreground">
Display 1-10 ratings on shows and songs.
</p>
</div>
<Switch
id="show-ratings"
checked={preferences.show_ratings}
disabled={preferences.wiki_mode}
onCheckedChange={(checked) => updatePreferences({ show_ratings: checked })}
/>
</div>
<div className="flex items-center justify-between space-x-2">
<div className="space-y-0.5">
<Label htmlFor="show-comments">Show Comments</Label>
<p className="text-sm text-muted-foreground">
Display comment sections on pages.
</p>
</div>
<Switch
id="show-comments"
checked={preferences.show_comments}
disabled={preferences.wiki_mode}
onCheckedChange={(checked) => updatePreferences({ show_comments: checked })}
/>
</div>
</CardContent>
</Card>
</div>
)
}