website refactor
This commit is contained in:
@@ -1,226 +1,20 @@
|
||||
'use client';
|
||||
import Link from 'next/link';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Container from '@/components/ui/Container';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import { routes } from '@/lib/routing/RouteConfig';
|
||||
|
||||
import { Bell, Shield, Eye, Volume2 } from 'lucide-react';
|
||||
import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
|
||||
|
||||
interface SettingsData {
|
||||
// Settings page is static, no data needed
|
||||
}
|
||||
|
||||
function SettingsTemplate({ data }: { data: SettingsData }) {
|
||||
export default async function ProfileSettingsPage() {
|
||||
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>
|
||||
<Container size="md">
|
||||
<Heading level={1}>Settings</Heading>
|
||||
<Card>
|
||||
<p>Settings are currently unavailable.</p>
|
||||
<Link href={routes.protected.profile}>
|
||||
<Button variant="secondary">Back to profile</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SettingsPage() {
|
||||
return (
|
||||
<StatefulPageWrapper
|
||||
data={{} as SettingsData}
|
||||
isLoading={false}
|
||||
error={null}
|
||||
Template={SettingsTemplate}
|
||||
loading={{ variant: 'skeleton', message: 'Loading settings...' }}
|
||||
errorConfig={{ variant: 'full-screen' }}
|
||||
empty={{
|
||||
title: 'No settings available',
|
||||
description: 'Unable to load settings page',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user