File size: 5,127 Bytes
24d40b9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 |
import { useState, useEffect } from "react";
import {
User, Bell, Moon, Sun, CreditCard, Languages,
CircleHelp, ChevronRight, LogOut, Shield
} from "lucide-react";
import AppLayout from "@/components/layout/AppLayout";
import Header from "@/components/shared/Header";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";
import { toast } from "sonner";
import { useTheme } from "@/components/theme/ThemeProvider";
const Settings = () => {
const { theme, setTheme } = useTheme();
const [isNotificationsEnabled, setIsNotificationsEnabled] = useState(true);
const isDarkMode = theme === "dark";
const toggleDarkMode = () => {
const newTheme = isDarkMode ? "light" : "dark";
setTheme(newTheme);
toast.success(`${newTheme.charAt(0).toUpperCase() + newTheme.slice(1)} mode enabled`);
};
const handleLogout = () => {
toast.success('Logged out successfully');
};
const SettingItem = ({
icon: Icon,
label,
onClick,
rightElement = <ChevronRight size={18} className="text-muted-foreground" />,
divider = true
}: {
icon: any;
label: string;
onClick?: () => void;
rightElement?: React.ReactNode;
divider?: boolean;
}) => (
<>
<button
onClick={onClick}
className="flex items-center justify-between w-full py-3.5 hover:bg-muted/50 dark:hover:bg-violet-muted/10 transition-colors"
>
<div className="flex items-center">
<div className="w-8 h-8 rounded-full bg-primary/10 dark:bg-violet/10 flex items-center justify-center mr-3">
<Icon size={16} className="text-primary dark:text-violet" />
</div>
<span>{label}</span>
</div>
{rightElement}
</button>
{divider && <div className="h-px w-full bg-border dark:bg-violet-muted/20" />}
</>
);
return (
<AppLayout>
<div className="max-w-md mx-auto">
<Header
title="Settings"
subtitle="Manage your preferences"
/>
<div className="px-4 pb-6 space-y-6 animate-fade-in">
<div className="rounded-xl border border-border dark:border-violet-muted/20 overflow-hidden bg-white/80 dark:bg-violet-darker/90 backdrop-blur-lg shadow-lg relative">
<div className="absolute inset-0 z-0 opacity-5">
<img
src="/lovable-uploads/efa85ef3-0e1e-44d2-bbd4-34fe8f8946e4.png"
alt="Settings background"
className="w-full h-full object-cover"
/>
</div>
<div className="relative z-10">
<SettingItem
icon={User}
label="Account"
/>
<SettingItem
icon={Bell}
label="Notifications"
rightElement={
<Switch
checked={isNotificationsEnabled}
onCheckedChange={setIsNotificationsEnabled}
/>
}
/>
<SettingItem
icon={isDarkMode ? Sun : Moon}
label="Dark Mode"
rightElement={
<Switch
checked={isDarkMode}
onCheckedChange={toggleDarkMode}
/>
}
/>
<SettingItem
icon={CreditCard}
label="Payment Methods"
/>
<SettingItem
icon={Languages}
label="Language"
rightElement={
<div className="text-sm text-muted-foreground dark:text-violet-light/70 flex items-center">
<span>English</span>
<ChevronRight size={16} />
</div>
}
/>
<SettingItem
icon={Shield}
label="Privacy & Security"
/>
<SettingItem
icon={CircleHelp}
label="Help & Support"
divider={false}
/>
</div>
</div>
<Button
variant="ghost"
onClick={handleLogout}
className="w-full py-6 text-red-500 hover:text-red-600 hover:bg-red-50/50 dark:hover:bg-red-900/20 border border-border dark:border-violet-muted/20 bg-white/80 dark:bg-violet-darker/90 backdrop-blur-sm shadow-md"
>
<LogOut size={16} className="mr-2" />
Log Out
</Button>
<p className="text-xs text-center text-muted-foreground dark:text-violet-light/50">
Flutter v1.0.0
</p>
</div>
</div>
</AppLayout>
);
};
export default Settings;
|