Spaces:
Sleeping
Sleeping
File size: 8,235 Bytes
2398be6 |
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 155 156 157 158 159 160 161 162 163 164 165 166 |
"use client";
import React, { useState } from "react";
import { AppLayout } from "@/components/app-layout";
import { Settings as SettingsIcon, User, Bell, Shield, Palette, Database } from "lucide-react";
export default function SettingsPage() {
const [darkMode, setDarkMode] = useState(true);
const [notifications, setNotifications] = useState(true);
const [autoSave, setAutoSave] = useState(true);
return (
<AppLayout>
<div className="flex flex-col h-full">
{/* Header */}
<div className="p-4 md:p-6 border-b border-orange-500/20 bg-black/30 backdrop-blur-sm">
<div className="max-w-5xl mx-auto">
<h1 className="text-2xl md:text-3xl font-bold bg-linear-to-r from-orange-300 to-yellow-300 bg-clip-text text-transparent flex items-center gap-2">
<SettingsIcon className="h-6 w-6 md:h-8 md:w-8 text-orange-400" />
Settings
</h1>
<p className="text-orange-100/70 mt-1 md:mt-2 text-sm md:text-base">
Manage your account and preferences
</p>
</div>
</div>
{/* Settings Content */}
<div className="flex-1 overflow-y-auto p-4 md:p-6">
<div className="max-w-5xl mx-auto space-y-4 md:space-y-6">
{/* Profile Section */}
<div className="bg-white/5 backdrop-blur-sm border border-orange-500/20 rounded-xl p-4 md:p-6">
<div className="flex items-center gap-3 mb-4">
<User className="h-4 w-4 md:h-5 md:w-5 text-orange-400" />
<h2 className="text-lg md:text-xl font-semibold text-orange-100">Profile</h2>
</div>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-orange-100/70 mb-2">
Display Name
</label>
<input
type="text"
placeholder="Your name"
className="w-full px-3 md:px-4 py-2 bg-black/30 border border-orange-500/20 rounded-lg text-orange-100 placeholder:text-orange-100/40 focus:outline-none focus:border-orange-500/50 text-sm md:text-base"
/>
</div>
<div>
<label className="block text-sm font-medium text-orange-100/70 mb-2">
Email
</label>
<input
type="email"
placeholder="your@email.com"
className="w-full px-3 md:px-4 py-2 bg-black/30 border border-orange-500/20 rounded-lg text-orange-100 placeholder:text-orange-100/40 focus:outline-none focus:border-orange-500/50 text-sm md:text-base"
/>
</div>
</div>
</div>
{/* Appearance Section */}
<div className="bg-white/5 backdrop-blur-sm border border-orange-500/20 rounded-xl p-4 md:p-6">
<div className="flex items-center gap-3 mb-4">
<Palette className="h-4 w-4 md:h-5 md:w-5 text-orange-400" />
<h2 className="text-lg md:text-xl font-semibold text-orange-100">Appearance</h2>
</div>
<div className="flex items-center justify-between">
<div>
<p className="text-orange-100 font-medium text-sm md:text-base">Dark Mode</p>
<p className="text-xs md:text-sm text-orange-100/60">Use dark theme across the app</p>
</div>
<button
onClick={() => setDarkMode(!darkMode)}
className={`relative w-12 h-6 rounded-full transition-colors ${
darkMode ? 'bg-orange-500' : 'bg-white/20'
}`}
>
<span
className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform ${
darkMode ? 'translate-x-6' : ''
}`}
/>
</button>
</div>
</div>
{/* Notifications Section */}
<div className="bg-white/5 backdrop-blur-sm border border-orange-500/20 rounded-xl p-4 md:p-6">
<div className="flex items-center gap-3 mb-4">
<Bell className="h-4 w-4 md:h-5 md:w-5 text-orange-400" />
<h2 className="text-lg md:text-xl font-semibold text-orange-100">Notifications</h2>
</div>
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<p className="text-orange-100 font-medium text-sm md:text-base">Push Notifications</p>
<p className="text-xs md:text-sm text-orange-100/60">Receive notifications about activity</p>
</div>
<button
onClick={() => setNotifications(!notifications)}
className={`relative w-12 h-6 rounded-full transition-colors ${
notifications ? 'bg-orange-500' : 'bg-white/20'
}`}
>
<span
className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform ${
notifications ? 'translate-x-6' : ''
}`}
/>
</button>
</div>
</div>
</div>
{/* Data & Privacy Section */}
<div className="bg-white/5 backdrop-blur-sm border border-orange-500/20 rounded-xl p-4 md:p-6">
<div className="flex items-center gap-3 mb-4">
<Database className="h-4 w-4 md:h-5 md:w-5 text-orange-400" />
<h2 className="text-lg md:text-xl font-semibold text-orange-100">Data & Privacy</h2>
</div>
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<p className="text-orange-100 font-medium text-sm md:text-base">Auto-save History</p>
<p className="text-xs md:text-sm text-orange-100/60">Automatically save conversation history</p>
</div>
<button
onClick={() => setAutoSave(!autoSave)}
className={`relative w-12 h-6 rounded-full transition-colors ${
autoSave ? 'bg-orange-500' : 'bg-white/20'
}`}
>
<span
className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform ${
autoSave ? 'translate-x-6' : ''
}`}
/>
</button>
</div>
<button className="w-full px-4 py-2 bg-red-500/20 border border-red-500/50 rounded-lg text-red-300 hover:bg-red-500/30 transition-colors text-sm md:text-base">
Clear All History
</button>
</div>
</div>
{/* Security Section */}
<div className="bg-white/5 backdrop-blur-sm border border-orange-500/20 rounded-xl p-4 md:p-6">
<div className="flex items-center gap-3 mb-4">
<Shield className="h-4 w-4 md:h-5 md:w-5 text-orange-400" />
<h2 className="text-lg md:text-xl font-semibold text-orange-100">Security</h2>
</div>
<div className="space-y-3">
<button className="w-full px-4 py-2 bg-black/30 border border-orange-500/20 rounded-lg text-orange-100 hover:border-orange-500/50 transition-colors text-left text-sm md:text-base">
Change Password
</button>
<button className="w-full px-4 py-2 bg-black/30 border border-orange-500/20 rounded-lg text-orange-100 hover:border-orange-500/50 transition-colors text-left text-sm md:text-base">
Two-Factor Authentication
</button>
</div>
</div>
</div>
</div>
</div>
</AppLayout>
);
}
|