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

"use client";

import { Eintrag } from "@/components/galerie/eintrag";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
import { Input } from "@/components/ui/input";
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";

export function OverlayBeispiele() {
  return (
    <>
      <Eintrag name="Dialog">
        <Dialog>
          <DialogTrigger render={<Button variant="outline" />}>Dialog öffnen</DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Reise umbenennen</DialogTitle>
              <DialogDescription>Der neue Name erscheint in allen Übersichten.</DialogDescription>
            </DialogHeader>
            <Input defaultValue="Island Rundreise" />
            <DialogFooter showCloseButton>
              <Button>Speichern</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </Eintrag>

      <Eintrag name="Alert Dialog">
        <AlertDialog>
          <AlertDialogTrigger render={<Button variant="destructive" />}>Reise löschen</AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>Reise wirklich löschen?</AlertDialogTitle>
              <AlertDialogDescription>Das lässt sich nicht rückgängig machen.</AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Abbrechen</AlertDialogCancel>
              <AlertDialogAction>Löschen</AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </Eintrag>

      <Eintrag name="Sheet">
        <Sheet>
          <SheetTrigger render={<Button variant="outline" />}>Seitenleiste öffnen</SheetTrigger>
          <SheetContent side="right">
            <SheetHeader>
              <SheetTitle>Filter</SheetTitle>
              <SheetDescription>Reisen nach Region und Dauer eingrenzen.</SheetDescription>
            </SheetHeader>
          </SheetContent>
        </Sheet>
      </Eintrag>

      <Eintrag name="Drawer">
        <Drawer>
          <DrawerTrigger render={<Button variant="outline" />}>Drawer öffnen</DrawerTrigger>
          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle>Reisedetails</DrawerTitle>
              <DrawerDescription>Nach unten wischen zum Schließen.</DrawerDescription>
            </DrawerHeader>
          </DrawerContent>
        </Drawer>
      </Eintrag>

      <Eintrag name="Popover">
        <Popover>
          <PopoverTrigger render={<Button variant="outline" />}>Popover öffnen</PopoverTrigger>
          <PopoverContent>
            <PopoverHeader>
              <PopoverTitle>Reisende</PopoverTitle>
              <PopoverDescription>2 Erwachsene, 1 Kind</PopoverDescription>
            </PopoverHeader>
          </PopoverContent>
        </Popover>
      </Eintrag>

      <Eintrag name="Tooltip">
        <Tooltip>
          <TooltipTrigger render={<Button variant="outline" />}>Mit der Maus darüber</TooltipTrigger>
          <TooltipContent>Zusätzliche Information</TooltipContent>
        </Tooltip>
      </Eintrag>

      <Eintrag name="Hover Card">
        <HoverCard>
          <HoverCardTrigger href="#">@reiseleitung</HoverCardTrigger>
          <HoverCardContent className="text-sm">
            <p className="font-bold">Reiseleitung Island</p>
            <p className="text-ink-muted">Begleitet seit 2015 Gruppen durch Island.</p>
          </HoverCardContent>
        </HoverCard>
      </Eintrag>

      <Eintrag name="Dropdown Menu">
        <DropdownMenu>
          <DropdownMenuTrigger render={<Button variant="outline" />}>Aktionen</DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuGroup>
              <DropdownMenuLabel>Reise</DropdownMenuLabel>
              <DropdownMenuItem>Bearbeiten</DropdownMenuItem>
              <DropdownMenuItem>Duplizieren</DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem variant="destructive">Löschen</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </Eintrag>

      <Eintrag name="Context Menu">
        <ContextMenu>
          <ContextMenuTrigger className="flex h-24 w-full items-center justify-center border border-dashed text-sm text-ink-muted">
            Rechtsklick hier
          </ContextMenuTrigger>
          <ContextMenuContent>
            <ContextMenuItem>Kopieren</ContextMenuItem>
            <ContextMenuItem>Einfügen</ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuItem variant="destructive">Entfernen</ContextMenuItem>
          </ContextMenuContent>
        </ContextMenu>
      </Eintrag>
    </>
  );
}