202 lines
12 KiB
TypeScript
202 lines
12 KiB
TypeScript
import { Bell, Shield, Eye, Volume2 } from 'lucide-react';
|
|
|
|
export default function SettingsPage() {
|
|
return (
|
|
<div className="min-h-screen bg-deep-graphite">
|
|
<div className="container mx-auto px-4 py-8">
|
|
<h1 className="text-2xl font-bold text-white mb-8">Settings</h1>
|
|
|
|
<div className="space-y-8">
|
|
{/* Notification Settings */}
|
|
<section className="bg-iron-gray rounded-lg border border-charcoal-outline p-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Bell className="h-5 w-5 text-primary-blue" />
|
|
<h2 className="text-lg font-semibold text-white">Notifications</h2>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
|
|
<div>
|
|
<p className="text-sm font-medium text-white">Protest Filed Against You</p>
|
|
<p className="text-xs text-gray-400">Get notified when someone files a protest involving you</p>
|
|
</div>
|
|
<select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
|
|
<option value="modal">Modal (Blocking)</option>
|
|
<option value="toast">Toast (Popup)</option>
|
|
<option value="silent">Silent (Notification Center)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
|
|
<div>
|
|
<p className="text-sm font-medium text-white">Vote Requested</p>
|
|
<p className="text-xs text-gray-400">Get notified when your vote is needed on a protest</p>
|
|
</div>
|
|
<select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
|
|
<option value="modal">Modal (Blocking)</option>
|
|
<option value="toast">Toast (Popup)</option>
|
|
<option value="silent">Silent (Notification Center)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
|
|
<div>
|
|
<p className="text-sm font-medium text-white">Defense Required</p>
|
|
<p className="text-xs text-gray-400">Get notified when you need to submit a defense</p>
|
|
</div>
|
|
<select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
|
|
<option value="modal">Modal (Blocking)</option>
|
|
<option value="toast">Toast (Popup)</option>
|
|
<option value="silent">Silent (Notification Center)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
|
|
<div>
|
|
<p className="text-sm font-medium text-white">Penalty Issued</p>
|
|
<p className="text-xs text-gray-400">Get notified when you receive a penalty</p>
|
|
</div>
|
|
<select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
|
|
<option value="toast" selected>Toast (Popup)</option>
|
|
<option value="modal">Modal (Blocking)</option>
|
|
<option value="silent">Silent (Notification Center)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
|
|
<div>
|
|
<p className="text-sm font-medium text-white">Race Starting Soon</p>
|
|
<p className="text-xs text-gray-400">Reminder before scheduled races begin</p>
|
|
</div>
|
|
<select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
|
|
<option value="toast">Toast (Popup)</option>
|
|
<option value="modal">Modal (Blocking)</option>
|
|
<option value="silent">Silent (Notification Center)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-3">
|
|
<div>
|
|
<p className="text-sm font-medium text-white">League Announcements</p>
|
|
<p className="text-xs text-gray-400">Updates from league administrators</p>
|
|
</div>
|
|
<select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
|
|
<option value="silent">Silent (Notification Center)</option>
|
|
<option value="toast">Toast (Popup)</option>
|
|
<option value="modal">Modal (Blocking)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Display Settings */}
|
|
<section className="bg-iron-gray rounded-lg border border-charcoal-outline p-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Eye className="h-5 w-5 text-primary-blue" />
|
|
<h2 className="text-lg font-semibold text-white">Display</h2>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
|
|
<div>
|
|
<p className="text-sm font-medium text-white">Toast Duration</p>
|
|
<p className="text-xs text-gray-400">How long toast notifications stay visible</p>
|
|
</div>
|
|
<select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
|
|
<option value="3000">3 seconds</option>
|
|
<option value="5000" selected>5 seconds</option>
|
|
<option value="8000">8 seconds</option>
|
|
<option value="10000">10 seconds</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-3">
|
|
<div>
|
|
<p className="text-sm font-medium text-white">Toast Position</p>
|
|
<p className="text-xs text-gray-400">Where toast notifications appear on screen</p>
|
|
</div>
|
|
<select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
|
|
<option value="top-right">Top Right</option>
|
|
<option value="top-left">Top Left</option>
|
|
<option value="bottom-right" selected>Bottom Right</option>
|
|
<option value="bottom-left">Bottom Left</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Sound Settings */}
|
|
<section className="bg-iron-gray rounded-lg border border-charcoal-outline p-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Volume2 className="h-5 w-5 text-primary-blue" />
|
|
<h2 className="text-lg font-semibold text-white">Sound</h2>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
|
|
<div>
|
|
<p className="text-sm font-medium text-white">Notification Sounds</p>
|
|
<p className="text-xs text-gray-400">Play sounds for new notifications</p>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" className="sr-only peer" defaultChecked />
|
|
<div className="w-11 h-6 bg-charcoal-outline peer-focus:outline-none 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-primary-blue"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-3">
|
|
<div>
|
|
<p className="text-sm font-medium text-white">Urgent Notification Sound</p>
|
|
<p className="text-xs text-gray-400">Special sound for modal notifications</p>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" className="sr-only peer" defaultChecked />
|
|
<div className="w-11 h-6 bg-charcoal-outline peer-focus:outline-none 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-primary-blue"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Privacy Settings */}
|
|
<section className="bg-iron-gray rounded-lg border border-charcoal-outline p-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Shield className="h-5 w-5 text-primary-blue" />
|
|
<h2 className="text-lg font-semibold text-white">Privacy</h2>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
|
|
<div>
|
|
<p className="text-sm font-medium text-white">Show Online Status</p>
|
|
<p className="text-xs text-gray-400">Let others see when you're online</p>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" className="sr-only peer" defaultChecked />
|
|
<div className="w-11 h-6 bg-charcoal-outline peer-focus:outline-none 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-primary-blue"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between py-3">
|
|
<div>
|
|
<p className="text-sm font-medium text-white">Public Profile</p>
|
|
<p className="text-xs text-gray-400">Allow non-league members to view your profile</p>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" className="sr-only peer" defaultChecked />
|
|
<div className="w-11 h-6 bg-charcoal-outline peer-focus:outline-none 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-primary-blue"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Save Button */}
|
|
<div className="flex justify-end">
|
|
<button className="px-6 py-2 bg-primary-blue text-white font-medium rounded-lg hover:bg-primary-blue/90 transition-colors">
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |