import AdminLayout from '@admin/layouts/admin/admin-layout'; import { cn } from '@admin/lib/utils'; import { Head } from '@inertiajs/react'; import { ChevronRight, Palette, Type } from 'lucide-react'; import { ReactNode, useState } from 'react'; import BrandingPanel from './panels/BrandingPanel'; import TypographyPanel from './panels/TypographyPanel'; type TabKey = 'branding' | 'typography'; const TABS: { key: TabKey; label: string; icon: React.ElementType }[] = [ { key: 'branding', label: 'Branding', icon: Palette }, { key: 'typography', label: 'Typography', icon: Type }, ]; interface Props { branding: Record; login: Record; typography: Record; } export default function PersonalizerIndex({ branding, login, typography }: Props) { const [activeTab, setActiveTab] = useState('branding'); const activeLabel = TABS.find((t) => t.key === activeTab)?.label ?? ''; return (

{/* Header */}

Appearance

Set system-wide defaults for branding, login page, and typography

Workspace Settings {activeLabel}

{/* Body */}

{/* Mobile nav */}

{TABS.map((tab) => { const Icon = tab.icon; const isActive = activeTab === tab.key; return ( ); })}

{/* Desktop: sidebar + content */}

Personalizer

{TABS.map((tab) => { const Icon = tab.icon; const isActive = activeTab === tab.key; return ( ); })}

{/* Main content */}

{activeTab === 'branding' && } {activeTab === 'typography' && }

); } PersonalizerIndex.layout = (page: ReactNode) => ( {page} );