118 lines
4.7 KiB
TypeScript
118 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import { Save, Bell, Lock } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
export default function SettingsPage() {
|
|
const [settings, setSettings] = useState({
|
|
emailNotifications: true,
|
|
pushNotifications: false,
|
|
marketingEmails: false,
|
|
publicProfile: true,
|
|
dataCollection: true,
|
|
});
|
|
|
|
const handleToggle = (key: keyof typeof settings) => {
|
|
setSettings((prev) => ({ ...prev, [key]: !prev[key] }));
|
|
};
|
|
|
|
return (
|
|
<div className="p-6 max-w-3xl mx-auto">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold mb-2">Settings</h1>
|
|
<p className="text-gray-600">Manage your preferences</p>
|
|
</div>
|
|
|
|
{/* Notification Settings */}
|
|
<div className="bg-white border border-gray-200 rounded-xl p-8 mb-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Bell className="w-6 h-6" />
|
|
<h3 className="text-lg font-semibold">Notifications</h3>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{[
|
|
{
|
|
key: "emailNotifications" as const,
|
|
label: "Email Notifications",
|
|
desc: "Receive updates about new characters and messages",
|
|
},
|
|
{
|
|
key: "pushNotifications" as const,
|
|
label: "Push Notifications",
|
|
desc: "Get notifications on your device",
|
|
},
|
|
{
|
|
key: "marketingEmails" as const,
|
|
label: "Marketing Emails",
|
|
desc: "Receive promotional content and special offers",
|
|
},
|
|
].map((item) => (
|
|
<div key={item.key} className="flex items-center justify-between py-3 border-b border-gray-200 last:border-0">
|
|
<div>
|
|
<p className="font-medium">{item.label}</p>
|
|
<p className="text-sm text-gray-600">{item.desc}</p>
|
|
</div>
|
|
<label className="relative inline-flex cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={settings[item.key]}
|
|
onChange={() => handleToggle(item.key)}
|
|
className="sr-only peer"
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-black rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-black"></div>
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Privacy Settings */}
|
|
<div className="bg-white border border-gray-200 rounded-xl p-8 mb-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Lock className="w-6 h-6" />
|
|
<h3 className="text-lg font-semibold">Privacy</h3>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{[
|
|
{
|
|
key: "publicProfile" as const,
|
|
label: "Public Profile",
|
|
desc: "Allow other users to see your profile",
|
|
},
|
|
{
|
|
key: "dataCollection" as const,
|
|
label: "Data Collection",
|
|
desc: "Allow us to collect usage data for improvements",
|
|
},
|
|
].map((item) => (
|
|
<div key={item.key} className="flex items-center justify-between py-3 border-b border-gray-200 last:border-0">
|
|
<div>
|
|
<p className="font-medium">{item.label}</p>
|
|
<p className="text-sm text-gray-600">{item.desc}</p>
|
|
</div>
|
|
<label className="relative inline-flex cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={settings[item.key]}
|
|
onChange={() => handleToggle(item.key)}
|
|
className="sr-only peer"
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-black rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-black"></div>
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Save Button */}
|
|
<button className="flex items-center justify-center gap-2 w-full px-6 py-3 bg-black text-white rounded-lg font-medium hover:bg-gray-800 transition">
|
|
<Save className="w-5 h-5" />
|
|
Save Settings
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|