83 lines
3.2 KiB
TypeScript
83 lines
3.2 KiB
TypeScript
// src/App.tsx
|
|
|
|
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
|
|
import { Calendar, FileText, Home as HomeIcon, Map, Leaf, Briefcase, LifeBuoy, Lock } from 'lucide-react';
|
|
|
|
import { Home } from './pages/Home';
|
|
import { JobInfo } from './pages/JobInfo';
|
|
import { FAQ } from './pages/FAQ';
|
|
import { Documents } from './pages/Documents';
|
|
import { Schedule } from './pages/Schedule';
|
|
import { Emergency } from './pages/Emergency';
|
|
import { Admin } from './pages/admin/AdminDashboard';
|
|
|
|
const NavItem = ({ to, icon: Icon, label, className = "" }: { to: string, icon: any, label: string, className?: string }) => {
|
|
const location = useLocation();
|
|
const isActive = location.pathname === to;
|
|
return (
|
|
<Link
|
|
to={to}
|
|
className={`flex flex-col items-center justify-center px-4 py-2 min-w-18 transition-colors border-b-[3px] ${className} ${isActive
|
|
? 'border-gold text-gold bg-ebony/30'
|
|
: 'border-transparent text-eggshell/80 hover:text-eggshell hover:bg-eggshell/5'
|
|
}`}
|
|
>
|
|
<Icon size={20} className="mb-1" strokeWidth={isActive ? 2.5 : 2} />
|
|
<span className="text-[10px] font-bold uppercase tracking-wider">{label}</span>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
function AppContent() {
|
|
return (
|
|
<div className="min-h-screen bg-eggshell font-sans text-ebony selection:bg-gold selection:text-ebony pb-10">
|
|
|
|
{/* Header & Navigation */}
|
|
<header className="sticky top-0 z-50 bg-ebony shadow-md">
|
|
<div className="max-w-5xl mx-auto">
|
|
{/* App Title Bar */}
|
|
<div className="px-4 py-3 flex items-center justify-between">
|
|
<h1 className="text-xl font-black text-eggshell flex items-center tracking-tight uppercase drop-shadow-sm">
|
|
<Leaf className="mr-2 text-seafoam" size={20} />
|
|
Naturvärdarna
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Scrollable Tab Navigation */}
|
|
<nav className="flex overflow-x-auto scrollbar-hide border-t border-eggshell/10">
|
|
<NavItem to="/" icon={HomeIcon} label="Hem" />
|
|
<NavItem to="/schedule" icon={Calendar} label="Schema" />
|
|
<NavItem to="/faq" icon={Map} label="FAQ" />
|
|
<NavItem to="/info" icon={Briefcase} label="Info" />
|
|
<NavItem to="/documents" icon={FileText} label="Filer" />
|
|
<NavItem to="/emergency" icon={LifeBuoy} label="Nödläge" className='text-emergency' />
|
|
<NavItem to="/admin" icon={Lock} label="Admin" className="md:ml-auto" />
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main Content Area */}
|
|
<main className="max-w-5xl mx-auto p-4 py-6 md:py-8">
|
|
<Routes>
|
|
<Route path="/" element={<Home />} />
|
|
<Route path="/info" element={<JobInfo />} />
|
|
<Route path="/faq" element={<FAQ />} />
|
|
<Route path="/documents" element={<Documents />} />
|
|
<Route path="/schedule" element={<Schedule />} />
|
|
<Route path="/emergency" element={<Emergency />} />
|
|
<Route path="/admin" element={<Admin />} />
|
|
</Routes>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function App() {
|
|
return (
|
|
<Router>
|
|
<AppContent />
|
|
</Router>
|
|
);
|
|
}
|
|
|
|
export default App; |