demo/frontend-starter/components/galerie/beispiele/navigation.tsx

"use client";

import { HomeIcon, MapIcon, PlaneIcon, SettingsIcon } from "lucide-react";

import { Eintrag } from "@/components/galerie/eintrag";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command";
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
} from "@/components/ui/sidebar";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

const SEITENLEISTE = [
  { titel: "Übersicht", icon: HomeIcon, aktiv: true },
  { titel: "Reisen", icon: PlaneIcon, aktiv: false },
  { titel: "Ziele", icon: MapIcon, aktiv: false },
  { titel: "Einstellungen", icon: SettingsIcon, aktiv: false },
];

export function NavigationBeispiele() {
  return (
    <>
      <Eintrag name="Breadcrumb">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="#">Start</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="#">Reisen</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Island</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </Eintrag>

      <Eintrag name="Navigation Menu">
        <NavigationMenu>
          <NavigationMenuList>
            <NavigationMenuItem>
              <NavigationMenuTrigger>Reisen</NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className="grid w-56 gap-1">
                  <li>
                    <NavigationMenuLink href="#">Rundreisen</NavigationMenuLink>
                  </li>
                  <li>
                    <NavigationMenuLink href="#">Kreuzfahrten</NavigationMenuLink>
                  </li>
                  <li>
                    <NavigationMenuLink href="#">Städtereisen</NavigationMenuLink>
                  </li>
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <NavigationMenuLink href="#">Kontakt</NavigationMenuLink>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      </Eintrag>

      <Eintrag name="Menubar">
        <Menubar>
          <MenubarMenu>
            <MenubarTrigger>Datei</MenubarTrigger>
            <MenubarContent>
              <MenubarItem>
                Neu <MenubarShortcut>⌘N</MenubarShortcut>
              </MenubarItem>
              <MenubarItem>Öffnen</MenubarItem>
              <MenubarSeparator />
              <MenubarItem>Drucken</MenubarItem>
            </MenubarContent>
          </MenubarMenu>
          <MenubarMenu>
            <MenubarTrigger>Bearbeiten</MenubarTrigger>
            <MenubarContent>
              <MenubarItem>Rückgängig</MenubarItem>
              <MenubarItem>Wiederholen</MenubarItem>
            </MenubarContent>
          </MenubarMenu>
        </Menubar>
      </Eintrag>

      <Eintrag name="Pagination">
        <Pagination>
          <PaginationContent>
            <PaginationItem>
              <PaginationPrevious href="#" />
            </PaginationItem>
            <PaginationItem>
              <PaginationLink href="#">1</PaginationLink>
            </PaginationItem>
            <PaginationItem>
              <PaginationLink href="#" isActive>
                2
              </PaginationLink>
            </PaginationItem>
            <PaginationItem>
              <PaginationEllipsis />
            </PaginationItem>
            <PaginationItem>
              <PaginationNext href="#" />
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      </Eintrag>

      <Eintrag name="Tabs">
        <Tabs defaultValue="flug" className="w-full">
          <TabsList>
            <TabsTrigger value="flug">Flug</TabsTrigger>
            <TabsTrigger value="hotel">Hotel</TabsTrigger>
          </TabsList>
          <TabsContent value="flug" className="text-sm text-ink-muted">
            Direktflug ab Frankfurt.
          </TabsContent>
          <TabsContent value="hotel" className="text-sm text-ink-muted">
            4 Nächte im Hotel am Hafen.
          </TabsContent>
        </Tabs>
      </Eintrag>

      <Eintrag name="Command">
        <Command className="border">
          <CommandInput placeholder="Befehl suchen …" />
          <CommandList>
            <CommandEmpty>Nichts gefunden.</CommandEmpty>
            <CommandGroup heading="Vorschläge">
              <CommandItem>
                Neue Reise anlegen <CommandShortcut>⌘R</CommandShortcut>
              </CommandItem>
              <CommandItem>Kunden suchen</CommandItem>
              <CommandItem>Einstellungen</CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      </Eintrag>

      <Eintrag name="Sidebar" breit>
        <SidebarProvider className="min-h-0 overflow-hidden border">
          <Sidebar collapsible="none">
            <SidebarContent>
              <SidebarGroup>
                <SidebarGroupLabel>Menü</SidebarGroupLabel>
                <SidebarGroupContent>
                  <SidebarMenu>
                    {SEITENLEISTE.map((eintrag) => (
                      <SidebarMenuItem key={eintrag.titel}>
                        <SidebarMenuButton isActive={eintrag.aktiv}>
                          <eintrag.icon />
                          <span>{eintrag.titel}</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    ))}
                  </SidebarMenu>
                </SidebarGroupContent>
              </SidebarGroup>
            </SidebarContent>
          </Sidebar>
          <SidebarInset className="p-4 text-sm text-ink-muted">Hier steht der Seiteninhalt.</SidebarInset>
        </SidebarProvider>
      </Eintrag>
    </>
  );
}