60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
import { Bell, BookOpen, ChevronRight, Info, LogOut, Settings } from 'lucide-react';
|
|
|
|
interface Props {
|
|
onNavigate: (page: string) => void;
|
|
}
|
|
|
|
interface Item {
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
sublabel?: string;
|
|
page?: string;
|
|
destructive?: boolean;
|
|
}
|
|
|
|
const ITEMS: Item[][] = [
|
|
[
|
|
{ icon: <Settings className="w-5 h-5" />, label: 'Preferences', sublabel: 'General settings', page: 'general' },
|
|
{ icon: <Bell className="w-5 h-5" />, label: 'Notifications' },
|
|
],
|
|
[
|
|
{ icon: <BookOpen className="w-5 h-5" />, label: 'Documentation' },
|
|
{ icon: <Info className="w-5 h-5" />, label: 'About Meatloaf', page: 'about-meatloaf' },
|
|
],
|
|
[
|
|
{ icon: <LogOut className="w-5 h-5" />, label: 'Log Out', destructive: true },
|
|
],
|
|
];
|
|
|
|
export default function ProfilePage({ onNavigate }: Props) {
|
|
return (
|
|
<div className="max-w-lg mx-auto py-8 px-4">
|
|
<h1 className="text-2xl font-bold mb-6">Profile</h1>
|
|
|
|
<div className="space-y-4">
|
|
{ITEMS.map((group, gi) => (
|
|
<div key={gi} className="rounded-xl overflow-hidden border border-neutral-200 divide-y divide-neutral-200">
|
|
{group.map((item, ii) => (
|
|
<button
|
|
key={ii}
|
|
onClick={() => item.page && onNavigate(item.page)}
|
|
disabled={!item.page}
|
|
className={`w-full flex items-center gap-3 px-4 py-3 text-left bg-white hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-default transition-colors ${item.destructive ? 'text-red-600' : 'text-neutral-900'}`}
|
|
>
|
|
<span className={item.destructive ? 'text-red-500' : 'text-neutral-500'}>
|
|
{item.icon}
|
|
</span>
|
|
<span className="flex-1 min-w-0">
|
|
<span className="block text-sm font-medium">{item.label}</span>
|
|
{item.sublabel && <span className="block text-xs text-neutral-400">{item.sublabel}</span>}
|
|
</span>
|
|
{item.page && <ChevronRight className="w-4 h-4 text-neutral-400 flex-shrink-0" />}
|
|
</button>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|