feat: Integrate

2026-02-12 18:08:15 +01:00
parent cea8cdf4ee
commit e9ea35a064
13 changed files with 209 additions and 68 deletions
--- a/viewer/components/site-header.tsx
+++ b/viewer/components/site-header.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+import { Menu, X, AlertTriangle, Home, List } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export function SiteHeader() {
+  const [isOpen, setIsOpen] = useState(false);
+  const pathname = usePathname();
+
+  const routes = [
+    {
+      href: "/",
+      label: "Třída",
+      active: pathname === "/",
+      icon: Home
+    },
+    {
+      href: "/all",
+      label: "Vše",
+      active: pathname === "/all",
+      icon: List
+    }
+  ];
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="flex h-14 items-center px-4 md:px-8">
+        <Button
+          variant="ghost"
+          className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+          <span className="sr-only">Toggle Menu</span>
+        </Button>
+
+        <div className="mr-4 hidden md:flex items-center">
+          <Link href="/" className="mr-6 flex items-center space-x-2">
+            <span className="hidden font-bold sm:inline-block">
+              Mimořádný rozvrh
+            </span>
+          </Link>
+          <nav className="flex items-center space-x-6 text-sm font-medium">
+            {routes.map((route) => (
+              <Link
+                key={route.href}
+                href={route.href}
+                className={cn(
+                  "transition-colors hover:text-foreground/80 flex items-center gap-2",
+                  route.active ? "text-foreground" : "text-foreground/60"
+                )}
+              >
+                <route.icon className="h-4 w-4" />
+                {route.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+
+        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end hidden">
+           <div className="w-full flex-1 md:w-auto md:flex-none">
+              <span className="font-bold md:hidden">Mimořádný rozvrh</span>
+           </div>
+           <nav className="flex items-center">
+              <Button variant="ghost" size="icon" title="Nahlásit chybu" asChild>
+                  <Link href="https://github.com/jzitnik/tablescraper/issues/new" target="_blank" rel="noreferrer">
+                      <AlertTriangle className="h-5 w-5 text-amber-500" />
+                      <span className="sr-only">Nahlásit chybu</span>
+                  </Link>
+              </Button>
+           </nav>
+        </div>
+      </div>
+
+      {isOpen && (
+        <div className="md:hidden border-t p-4 space-y-4 bg-background animate-in slide-in-from-top-5">
+             <nav className="flex flex-col space-y-4">
+                {routes.map((route) => (
+                  <Link
+                    key={route.href}
+                    href={route.href}
+                    onClick={() => setIsOpen(false)}
+                    className={cn(
+                      "text-sm font-medium transition-colors hover:text-primary p-2 rounded-md hover:bg-muted",
+                      route.active ? "bg-muted text-foreground" : "text-muted-foreground"
+                    )}
+                  >
+                     <div className="flex items-center gap-3">
+                        <route.icon className="h-5 w-5" />
+                        {route.label}
+                     </div>
+                  </Link>
+                ))}
+             </nav>
+        </div>
+      )}
+    </header>
+  );
+}