189 lines
11 KiB
TypeScript
189 lines
11 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import React from "react"
|
||
|
|
import { useTheme } from "next-themes"
|
||
|
|
import { useWalletStore } from "@/lib/wallet-store"
|
||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
|
|
import { Label } from "@/components/ui/label"
|
||
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
|
|
import { MoonIcon, SunIcon, UserIcon, Cog, ShieldCheck, ShieldAlert } from "lucide-react"
|
||
|
|
import { Button } from "@/components/ui/button"
|
||
|
|
import { Switch } from "@/components/ui/switch"
|
||
|
|
|
||
|
|
export default function SettingsPage() {
|
||
|
|
const { theme, setTheme } = useTheme()
|
||
|
|
const { walletConnected, username, isVerified, toggleVerification } = useWalletStore()
|
||
|
|
|
||
|
|
if (!walletConnected) {
|
||
|
|
return (
|
||
|
|
<div className="container mx-auto px-4 py-8">
|
||
|
|
<div className="mx-auto max-w-3xl text-center">
|
||
|
|
<h1 className="text-3xl font-bold tracking-tight sm:text-4xl">Connect Your Wallet</h1>
|
||
|
|
<p className="mt-4 text-lg text-muted-foreground">
|
||
|
|
Please connect your wallet to view your settings.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="container mx-auto px-4 py-8 max-w-3xl">
|
||
|
|
<div className="flex flex-col space-y-6">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<h1 className="text-3xl font-bold">Settings</h1>
|
||
|
|
<Cog className="h-6 w-6 text-muted-foreground" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Tabs defaultValue="appearance">
|
||
|
|
<TabsList className="grid w-full grid-cols-3">
|
||
|
|
<TabsTrigger value="appearance">Appearance</TabsTrigger>
|
||
|
|
<TabsTrigger value="account">Account</TabsTrigger>
|
||
|
|
<TabsTrigger value="notifications">Notifications</TabsTrigger>
|
||
|
|
</TabsList>
|
||
|
|
|
||
|
|
<TabsContent value="appearance" className="mt-6">
|
||
|
|
<Card className="dark:border-border">
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>Appearance</CardTitle>
|
||
|
|
<CardDescription>
|
||
|
|
Customize how VoxPop looks and feels for you
|
||
|
|
</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="space-y-6">
|
||
|
|
<div className="space-y-3">
|
||
|
|
<Label htmlFor="theme">Theme</Label>
|
||
|
|
<div className="flex flex-col gap-4">
|
||
|
|
<div className="flex justify-between items-center">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-md border border-input">
|
||
|
|
{theme === "light" ? (
|
||
|
|
<SunIcon className="h-5 w-5 text-orange-500" />
|
||
|
|
) : (
|
||
|
|
<MoonIcon className="h-5 w-5 text-blue-500" />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p className="text-sm font-medium">{theme === "light" ? "Light" : "Dark"} Mode</p>
|
||
|
|
<p className="text-xs text-muted-foreground">
|
||
|
|
{theme === "light" ? "Light" : "Dark"} theme for the interface
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<Button
|
||
|
|
size="sm"
|
||
|
|
variant={theme === "light" ? "default" : "outline"}
|
||
|
|
onClick={() => setTheme("light")}
|
||
|
|
className="gap-1"
|
||
|
|
>
|
||
|
|
<SunIcon className="h-4 w-4" />
|
||
|
|
Light
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
size="sm"
|
||
|
|
variant={theme === "dark" ? "default" : "outline"}
|
||
|
|
onClick={() => setTheme("dark")}
|
||
|
|
className="gap-1"
|
||
|
|
>
|
||
|
|
<MoonIcon className="h-4 w-4" />
|
||
|
|
Dark
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
size="sm"
|
||
|
|
variant={theme === "system" ? "default" : "outline"}
|
||
|
|
onClick={() => setTheme("system")}
|
||
|
|
>
|
||
|
|
System
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</TabsContent>
|
||
|
|
|
||
|
|
<TabsContent value="account" className="mt-6">
|
||
|
|
<Card className="dark:border-border">
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>Account Settings</CardTitle>
|
||
|
|
<CardDescription>
|
||
|
|
Manage your account settings and preferences
|
||
|
|
</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="space-y-6">
|
||
|
|
<div className="flex justify-between items-center pb-4 border-b dark:border-border">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
|
||
|
|
<UserIcon className="h-5 w-5 text-primary" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p className="font-medium">{username || "Anonymous User"}</p>
|
||
|
|
<p className="text-sm text-muted-foreground">Account holder</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Button variant="outline" size="sm">
|
||
|
|
Edit Profile
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* For testing: allows toggling verification status */}
|
||
|
|
<div className="flex justify-between items-center py-2">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className="h-8 w-8 rounded-full flex items-center justify-center">
|
||
|
|
{isVerified ? (
|
||
|
|
<ShieldCheck className="h-5 w-5 text-green-500" />
|
||
|
|
) : (
|
||
|
|
<ShieldAlert className="h-5 w-5 text-amber-500" />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p className="font-medium">Verification Status</p>
|
||
|
|
<p className="text-sm text-muted-foreground">
|
||
|
|
{isVerified ? "Verified user with full privileges" : "Unverified user with limited access"}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Label htmlFor="verification-toggle" className="text-sm font-medium cursor-pointer">
|
||
|
|
{isVerified ? "Verified" : "Unverified"}
|
||
|
|
</Label>
|
||
|
|
<Switch
|
||
|
|
id="verification-toggle"
|
||
|
|
checked={isVerified}
|
||
|
|
onCheckedChange={toggleVerification}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-6">
|
||
|
|
<p className="text-sm text-muted-foreground">
|
||
|
|
This verification toggle is for testing purposes only. In a production environment,
|
||
|
|
verification status would be determined by actual identity verification.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</TabsContent>
|
||
|
|
|
||
|
|
<TabsContent value="notifications" className="mt-6">
|
||
|
|
<Card className="dark:border-border">
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>Notification Settings</CardTitle>
|
||
|
|
<CardDescription>
|
||
|
|
Manage how and when you receive notifications
|
||
|
|
</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<p className="text-muted-foreground">
|
||
|
|
Notification settings are not yet implemented.
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</TabsContent>
|
||
|
|
</Tabs>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|