58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
"use client"
|
||
|
||
import { useTheme } from "next-themes"
|
||
import { Card, CardContent, CardTitle, CardHeader } from "@/components/ui/card"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Switch } from "@/components/ui/switch"
|
||
import { useEffect, useState } from "react"
|
||
|
||
export function AppearanceForm() {
|
||
const { theme, setTheme } = useTheme()
|
||
const [mounted, setMounted] = useState(false)
|
||
|
||
// Avoid hydration mismatch
|
||
useEffect(() => {
|
||
setMounted(true)
|
||
}, [])
|
||
|
||
if (!mounted) {
|
||
return (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Görünüm</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="flex items-center justify-between space-y-2">
|
||
<Label htmlFor="dark-mode" className="flex flex-col space-y-1">
|
||
<span>Karanlık Mod</span>
|
||
<span className="font-normal text-xs text-muted-foreground">Koyu temayı etkinleştir.</span>
|
||
</Label>
|
||
<Switch id="dark-mode" disabled />
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Görünüm</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="flex items-center justify-between space-y-2">
|
||
<Label htmlFor="dark-mode" className="flex flex-col space-y-1">
|
||
<span>Karanlık Mod</span>
|
||
<span className="font-normal text-xs text-muted-foreground">Koyu temayı etkinleştir.</span>
|
||
</Label>
|
||
<Switch
|
||
id="dark-mode"
|
||
checked={theme === 'dark'}
|
||
onCheckedChange={(checked) => setTheme(checked ? 'dark' : 'light')}
|
||
/>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|