Main structure.

2026-03-12 23:51:48 +01:00
commit d317eccc9e
25 changed files with 8920 additions and 0 deletions
@@ -0,0 +1,80 @@
+// src/App.tsx
+
+import { Calendar, FileText, Home as HomeIcon, Leaf, Map, ShieldAlert } from 'lucide-react';
+import { Link, Route, BrowserRouter as Router, Routes, useLocation } from 'react-router-dom';
+
+import { Documents } from './pages/Documents';
+import { FAQ } from './pages/FAQ';
+import { Home } from './pages/Home';
+import { JobInfo } from './pages/JobInfo';
+import { Schedule } from './pages/Schedule';
+
+const Admin = () => <div className="p-6"><h2>Admin Dashboard (Kräver pinkod)</h2></div>;
+
+const NavItem = ({ to, icon: Icon, label }: { to: string, icon: any, label: string }) => {
+  const location = useLocation();
+  const isActive = location.pathname === to;
+  return (
+    <Link
+      to={to}
+      className={`flex items-center px-4 py-3 whitespace-nowrap text-sm font-bold transition-all border-b-[3px] ${isActive
+        ? 'border-gold text-gold bg-ebony/30'
+        : 'border-transparent text-eggshell/80 hover:text-eggshell hover:bg-eggshell/5'
+        }`}
+    >
+      <Icon size={18} className="mr-2" strokeWidth={isActive ? 2.5 : 2} />
+      {label}
+    </Link>
+  );
+};
+
+function AppContent() {
+  return (
+    <div className="min-h-screen bg-eggshell font-sans text-ebony selection:bg-gold selection:text-ebony">
+
+      {/* Creative, vibrant header using only your colors */}
+      <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="/faq" icon={Map} label="FAQ" />
+            <NavItem to="/schedule" icon={Calendar} label="Schema" />
+            <NavItem to="/documents" icon={FileText} label="Info & Dok" />
+            <NavItem to="/admin" icon={ShieldAlert} label="Admin" />
+          </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="/admin" element={<Admin />} />
+        </Routes>
+      </main>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <Router>
+      <AppContent />
+    </Router>
+  );
+}
+
+export default App;