Hitonabi
84 lines
3.4 KiB
TypeScript
84 lines
3.4 KiB
TypeScript
import { useState } from 'react'
|
|
import { LayoutDashboard, Disc, Settings, LogOut, Sun, Moon } from 'lucide-react'
|
|
import { useDarkMode } from './context/ThemeContext'
|
|
import Dashboard from './pages/Dashboard'
|
|
import MetadataPreview from './pages/MetadataPreview'
|
|
import SettingsPage from './pages/Settings'
|
|
|
|
type Page = 'dashboard' | 'metadata' | 'settings'
|
|
|
|
function App() {
|
|
const [page, setPage] = useState<Page>('dashboard')
|
|
const { theme, toggleTheme } = useDarkMode()
|
|
|
|
const navItems = [
|
|
{ id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
|
|
{ id: 'metadata', label: 'Metadaten', icon: Disc },
|
|
{ id: 'settings', label: 'Einstellungen', icon: Settings },
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100 font-sans transition-colors duration-300">
|
|
<div className="flex h-screen overflow-hidden">
|
|
{/* Sidebar */}
|
|
<aside className="w-64 bg-slate-900 text-slate-100 flex flex-col">
|
|
<div className="p-6">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl">
|
|
<Disc size={28} className="text-white" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-xl font-bold tracking-tight">Rippy</h1>
|
|
<p className="text-xs text-slate-400 dark:text-slate-500">Automated Ripping</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={toggleTheme}
|
|
className="mx-3 flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-slate-800/50 text-slate-400 hover:bg-slate-700 hover:text-white transition-all duration-200"
|
|
title={theme === 'dark' ? 'Light Mode' : 'Light Mode'}
|
|
>
|
|
{theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
|
|
</button>
|
|
|
|
<nav className="flex-1 px-3 py-2 space-y-1">
|
|
{navItems.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => setPage(item.id as Page)}
|
|
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${
|
|
page === item.id
|
|
? 'bg-indigo-600 text-white shadow-lg shadow-indigo-500/30'
|
|
: 'text-slate-400 hover:bg-slate-800 hover:text-white'
|
|
}`}
|
|
>
|
|
<item.icon size={20} />
|
|
<span className="font-medium">{item.label}</span>
|
|
</button>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="p-4 border-t border-slate-800 dark:border-slate-700">
|
|
<button className="w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-slate-400 hover:text-white hover:bg-slate-800 dark:text-slate-400 dark:hover:text-white dark:hover:bg-slate-700">
|
|
<LogOut size={20} />
|
|
<span className="text-sm">Abmelden</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content */}
|
|
<main className="flex-1 overflow-auto bg-slate-50 dark:bg-slate-950">
|
|
<div className="max-w-7xl mx-auto p-6">
|
|
{page === 'dashboard' && <Dashboard />}
|
|
{page === 'metadata' && <MetadataPreview />}
|
|
{page === 'settings' && <SettingsPage />}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|