39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { useState } from "react"
|
||
|
|
import { Flex, Text, Switch, Button } from "@radix-ui/themes"
|
||
|
|
import Sidebar from "../../components/account/Sidebar"
|
||
|
|
|
||
|
|
export default function Settings() {
|
||
|
|
const [darkMode, setDarkMode] = useState(true)
|
||
|
|
const [notifications, setNotifications] = useState(true)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Flex>
|
||
|
|
<Sidebar />
|
||
|
|
<Flex direction="column" className="flex-1 p-8">
|
||
|
|
<Text size="8" weight="bold" className="mb-6">
|
||
|
|
Settings
|
||
|
|
</Text>
|
||
|
|
<Flex direction="column" gap="4" className="mt-4" style={{ maxWidth: "500px" }}>
|
||
|
|
<Flex justify="between" align="center">
|
||
|
|
<Text size="4">Dark Mode</Text>
|
||
|
|
<Switch checked={darkMode} onCheckedChange={setDarkMode} />
|
||
|
|
</Flex>
|
||
|
|
<Flex justify="between" align="center" className="mb-4">
|
||
|
|
<Text size="4">Enable Notifications</Text>
|
||
|
|
<Switch checked={notifications} onCheckedChange={setNotifications} />
|
||
|
|
</Flex>
|
||
|
|
<Flex justify="center" gap="4" align="center">
|
||
|
|
<Button>Save Changes</Button>
|
||
|
|
<Button color="gray" variant="outline" highContrast>
|
||
|
|
Go Back
|
||
|
|
</Button>
|
||
|
|
</Flex>
|
||
|
|
</Flex>
|
||
|
|
</Flex>
|
||
|
|
</Flex>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|