External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-18 16:07:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Settings Page Style Update

Browse Source
This commit is contained in:
headlessdev 2025-04-15 16:18:35 +02:00
parent 724a634985
commit 7eafdef288
1 changed files with 134 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
app/dashboard/settings/Settings.tsx
View File

@ -12,7 +12,7 @@ import {
SidebarProvider, SidebarProvider,
SidebarTrigger, SidebarTrigger,
} from "@/components/ui/sidebar"; } from "@/components/ui/sidebar";
import { Card, CardHeader } from "@/components/ui/card"; import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import { import {
Select, Select,
@ -33,7 +33,7 @@ import axios from "axios";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { AlertCircle, Check } from "lucide-react"; import { AlertCircle, Check, Palette, User } from "lucide-react";
export default function Settings() { export default function Settings() {
const { theme, setTheme } = useTheme(); const { theme, setTheme } = useTheme();
@ -157,120 +157,127 @@ export default function Settings() {
</div> </div>
</header> </header>
<div className="pl-4 pr-4"> <div className="pl-4 pr-4">
<div className="pb-4">
<span className="text-2xl font-semibold">Settings</span> <span className="text-2xl font-semibold">Settings</span>
<div className="pt-4"> </div>
<Card className="w-full mb-4 relative"> <div className="grid gap-6">
<CardHeader> <Card className="overflow-hidden border-2 border-muted/20 shadow-sm">
<Accordion type="single" collapsible> <CardHeader className="bg-muted/10 px-6 py-4 border-b">
<AccordionItem value="item-1"> <div className="flex items-center gap-2">
<AccordionTrigger className="text-xl font-bold">User</AccordionTrigger> <User className="h-5 w-5 text-primary" />
<AccordionContent className="text-sm font-normal"> <h2 className="text-xl font-semibold">User Settings</h2>
<div className="pb-4">Manage your user settings here. You can change your email, password, and other account settings.</div> </div>
<div className="flex flex-col md:flex-row gap-2 mb-2"> </CardHeader>
<div className="w-full"> <CardContent className="p-6">
<div className="pb-1 font-semibold text-lg">Change Email</div> <div className="text-sm text-muted-foreground mb-6">
{ emailErrorVisible && Manage your user settings here. You can change your email, password, and other account settings.
<div className="pb-2 pt-2"> </div>
<Alert variant="destructive">
<div className="grid md:grid-cols-2 gap-8">
<div className="space-y-4">
<div className="border-b pb-2">
<h3 className="font-semibold text-lg">Change Email</h3>
</div>
{emailErrorVisible && (
<Alert variant="destructive" className="animate-in fade-in-50">
<AlertCircle className="h-4 w-4" /> <AlertCircle className="h-4 w-4" />
<AlertTitle>Error</AlertTitle> <AlertTitle>Error</AlertTitle>
<AlertDescription> <AlertDescription>{emailError}</AlertDescription>
{emailError}
</AlertDescription>
</Alert> </Alert>
</div> )}
}
{ emailSuccess && {emailSuccess && (
<div className="pb-2 pt-2"> <Alert className="border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-300 animate-in fade-in-50">
<Alert>
<Check className="h-4 w-4" /> <Check className="h-4 w-4" />
<AlertTitle>Success</AlertTitle> <AlertTitle>Success</AlertTitle>
<AlertDescription> <AlertDescription>Email changed successfully.</AlertDescription>
Email changed successfully.
</AlertDescription>
</Alert> </Alert>
</div> )}
}
<div className="space-y-3">
<Input <Input
type="email" type="email"
placeholder="Enter new email" placeholder="Enter new email"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
className="mb-2" className="h-11"
/> />
<Button <Button onClick={changeEmail} className="w-full h-11">
onClick={changeEmail}
className="w-full"
>
Change Email Change Email
</Button> </Button>
</div> </div>
<div className="w-full"> </div>
<div className="pb-1 font-semibold text-lg">Change Password</div>
{ passwordErrorVisible && <div className="space-y-4">
<div className="pb-2 pt-2"> <div className="border-b pb-2">
<Alert variant="destructive"> <h3 className="font-semibold text-lg">Change Password</h3>
</div>
{passwordErrorVisible && (
<Alert variant="destructive" className="animate-in fade-in-50">
<AlertCircle className="h-4 w-4" /> <AlertCircle className="h-4 w-4" />
<AlertTitle>Error</AlertTitle> <AlertTitle>Error</AlertTitle>
<AlertDescription> <AlertDescription>{passwordError}</AlertDescription>
{passwordError}
</AlertDescription>
</Alert> </Alert>
</div> )}
}
{ passwordSuccess && {passwordSuccess && (
<div className="pb-2 pt-2"> <Alert className="border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-300 animate-in fade-in-50">
<Alert>
<Check className="h-4 w-4" /> <Check className="h-4 w-4" />
<AlertTitle>Success</AlertTitle> <AlertTitle>Success</AlertTitle>
<AlertDescription> <AlertDescription>Password changed successfully.</AlertDescription>
Password changed successfully.
</AlertDescription>
</Alert> </Alert>
</div> )}
}
<div className="space-y-3">
<Input <Input
type="password" type="password"
placeholder="Enter old password" placeholder="Enter old password"
value={oldPassword} value={oldPassword}
onChange={(e) => setOldPassword(e.target.value)} onChange={(e) => setOldPassword(e.target.value)}
className="mb-2" className="h-11"
/> />
<Input <Input
type="password" type="password"
placeholder="Enter new password" placeholder="Enter new password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
className="mb-2" className="h-11"
/> />
<Input <Input
type="password" type="password"
placeholder="Confirm new password" placeholder="Confirm new password"
value={confirmPassword} value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)} onChange={(e) => setConfirmPassword(e.target.value)}
className="mb-2" className="h-11"
/> />
<Button <Button onClick={changePassword} className="w-full h-11">
onClick={changePassword}
className="w-full"
>
Change Password Change Password
</Button> </Button>
</div> </div>
</div> </div>
</AccordionContent> </div>
</AccordionItem> </CardContent>
<AccordionItem value="item-2"> </Card>
<AccordionTrigger className="text-xl font-bold">Theme</AccordionTrigger>
<AccordionContent className="text-sm font-normal"> <Card className="overflow-hidden border-2 border-muted/20 shadow-sm">
<div className="pb-1">Select a theme for the application. You can choose between light, dark, or system theme.</div> <CardHeader className="bg-muted/10 px-6 py-4 border-b">
<Select <div className="flex items-center gap-2">
value={theme} <Palette className="h-5 w-5 text-primary" />
onValueChange={(value: string) => setTheme(value)} <h2 className="text-xl font-semibold">Theme Settings</h2>
> </div>
<SelectTrigger className="w-full [&_svg]:hidden"> </CardHeader>
<CardContent className="p-6">
<div className="text-sm text-muted-foreground mb-6">
Select a theme for the application. You can choose between light, dark, or system theme.
</div>
<div className="max-w-md">
<Select value={theme} onValueChange={(value: string) => setTheme(value)}>
<SelectTrigger className="w-full h-11">
<SelectValue> <SelectValue>
{(theme ?? 'system').charAt(0).toUpperCase() + (theme ?? 'system').slice(1)} {(theme ?? "system").charAt(0).toUpperCase() + (theme ?? "system").slice(1)}
</SelectValue> </SelectValue>
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -279,14 +286,12 @@ export default function Settings() {
<SelectItem value="system">System</SelectItem> <SelectItem value="system">System</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</AccordionContent> </div>
</AccordionItem> </CardContent>
</Accordion>
</CardHeader>
</Card> </Card>
</div> </div>
</div> </div>
</SidebarInset> </SidebarInset>
</SidebarProvider> </SidebarProvider>
); )
} }