137 lines
4.1 KiB
TypeScript

"use client"
import { motion } from "motion/react"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { ChangePassword } from "@/components/cards/dashboard/Settings/ChangePassword"
import { useState, useEffect } from "react"
import { LayoutDashboard } from "lucide-react"
const fadeIn = {
initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 },
transition: { duration: 0.4 },
}
export default function Settings() {
const [settings, setSettings] = useState({
hideGenAI: false,
hideUpgrades: false,
hideCrypto: false
});
const [loading, setLoading] = useState(false)
useEffect(() => {
const fetchSettings = async () => {
try {
setLoading(true);
const response = await fetch('/api/users/settings')
if (response.ok) {
const data = await response.json()
setSettings(data)
} else {
console.error('[!] Failed to fetch settings')
}
} catch (error) {
console.error('[!] Error fetching settings:', error)
} finally {
setLoading(false)
}
};
fetchSettings()
}, []);
const updateSetting = async (settingName: string, value: boolean) => {
setSettings(prev => ({
...prev,
[settingName]: value
}))
try {
setLoading(true)
const response = await fetch('/api/users/settings', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
...settings,
[settingName]: value
}),
})
if (response.ok) {
const updatedSettings = await response.json()
setSettings(updatedSettings)
} else {
console.error('[!] Failed to update settings')
setSettings(prev => ({
...prev,
[settingName]: !value
}))
}
} catch (error) {
console.error('[!] Error updating settings:', error)
setSettings(prev => ({
...prev,
[settingName]: !value
}))
} finally {
setLoading(false)
window.location.reload()
}
};
return (
<motion.div {...fadeIn}>
<h1 className="text-3xl font-bold mb-6 text-foreground">Settings</h1>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<ChangePassword />
<Card>
<CardHeader>
<CardTitle className="flex items-center">
<LayoutDashboard size={15} className="mr-1" />
Dashboard Settings
</CardTitle>
<CardDescription>Customize your dashboard experience</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex items-center justify-between">
<Label htmlFor="hideGenAI">Hide Generative AI</Label>
<Switch
id="hideGenAI"
checked={settings.hideGenAI}
onCheckedChange={(checked) => updateSetting('hideGenAI', checked)}
disabled={loading}
/>
</div>
<div className="flex items-center justify-between">
<Label htmlFor="hideUpgrades">Hide Upgrades</Label>
<Switch
id="hideUpgrades"
checked={settings.hideUpgrades}
onCheckedChange={(checked) => updateSetting('hideUpgrades', checked)}
disabled={loading}
/>
</div>
<div className="flex items-center justify-between">
<Label htmlFor="hideCrypto">Hide Crypto Exchange</Label>
<Switch
id="hideCrypto"
checked={settings.hideCrypto}
onCheckedChange={(checked) => updateSetting('hideCrypto', checked)}
disabled={loading}
/>
</div>
</div>
</CardContent>
</Card>
</div>
</motion.div>
)
}