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

"use client";

import * as React from "react";
import { format } from "date-fns";
import { de } from "date-fns/locale";
import { BoldIcon, CalendarIcon, ItalicIcon, SearchIcon, UnderlineIcon } from "lucide-react";

import { Eintrag } from "@/components/galerie/eintrag";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import { Calendar } from "@/components/ui/calendar";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@/components/ui/input-otp";
import { Label } from "@/components/ui/label";
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Slider } from "@/components/ui/slider";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { Toggle } from "@/components/ui/toggle";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

const REISEZIELE = ["Island", "Japan", "Kanada", "Namibia", "Norwegen", "Peru"];

const ZIMMER = [
  { label: "Einzelzimmer", value: "ez" },
  { label: "Doppelzimmer", value: "dz" },
  { label: "Suite", value: "suite" },
];

export function FormularBeispiele() {
  const [datum, setDatum] = React.useState<Date | undefined>(new Date());
  const [reisedatum, setReisedatum] = React.useState<Date | undefined>();

  return (
    <>
      <Eintrag name="Button">
        <Button>Standard</Button>
        <Button variant="secondary">Sekundär</Button>
        <Button variant="outline">Umriss</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="destructive">Löschen</Button>
        <Button variant="link">Link</Button>
      </Eintrag>

      <Eintrag name="Button Group">
        <ButtonGroup>
          <Button variant="outline">Zurück</Button>
          <Button variant="outline">Heute</Button>
          <Button variant="outline">Weiter</Button>
        </ButtonGroup>
      </Eintrag>

      <Eintrag name="Input">
        <Input placeholder="Name der Reise" />
      </Eintrag>

      <Eintrag name="Input Group">
        <InputGroup>
          <InputGroupInput placeholder="Hotels suchen …" />
          <InputGroupAddon>
            <SearchIcon />
          </InputGroupAddon>
          <InputGroupAddon align="inline-end">12 Treffer</InputGroupAddon>
        </InputGroup>
      </Eintrag>

      <Eintrag name="Input OTP">
        <InputOTP maxLength={6}>
          <InputOTPGroup>
            <InputOTPSlot index={0} />
            <InputOTPSlot index={1} />
            <InputOTPSlot index={2} />
          </InputOTPGroup>
          <InputOTPSeparator />
          <InputOTPGroup>
            <InputOTPSlot index={3} />
            <InputOTPSlot index={4} />
            <InputOTPSlot index={5} />
          </InputOTPGroup>
        </InputOTP>
      </Eintrag>

      <Eintrag name="Textarea">
        <Textarea placeholder="Besondere Wünsche zur Reise …" />
      </Eintrag>

      <Eintrag name="Label">
        <Label htmlFor="galerie-label">Vorname</Label>
        <Input id="galerie-label" placeholder="Max" />
      </Eintrag>

      <Eintrag name="Field">
        <Field>
          <FieldLabel htmlFor="galerie-email">E-Mail</FieldLabel>
          <Input id="galerie-email" type="email" placeholder="[email protected]" />
          <FieldDescription>Wir senden die Bestätigung an diese Adresse.</FieldDescription>
        </Field>
      </Eintrag>

      <Eintrag name="Checkbox">
        <Label>
          <Checkbox defaultChecked /> Reiserücktrittsversicherung
        </Label>
        <Label>
          <Checkbox /> Newsletter
        </Label>
      </Eintrag>

      <Eintrag name="Radio Group">
        <RadioGroup defaultValue="bahn">
          <Label>
            <RadioGroupItem value="bahn" /> Anreise mit der Bahn
          </Label>
          <Label>
            <RadioGroupItem value="flug" /> Anreise mit dem Flugzeug
          </Label>
        </RadioGroup>
      </Eintrag>

      <Eintrag name="Switch">
        <Label>
          <Switch defaultChecked /> Benachrichtigungen
        </Label>
      </Eintrag>

      <Eintrag name="Slider">
        <Slider defaultValue={[40]} max={100} />
      </Eintrag>

      <Eintrag name="Select">
        <Select items={ZIMMER} defaultValue="dz">
          <SelectTrigger className="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              {ZIMMER.map((zimmer) => (
                <SelectItem key={zimmer.value} value={zimmer.value}>
                  {zimmer.label}
                </SelectItem>
              ))}
            </SelectGroup>
          </SelectContent>
        </Select>
      </Eintrag>

      <Eintrag name="Native Select">
        <NativeSelect defaultValue="">
          <NativeSelectOption value="" disabled>
            Verpflegung wählen
          </NativeSelectOption>
          <NativeSelectOption value="fr">Frühstück</NativeSelectOption>
          <NativeSelectOption value="hp">Halbpension</NativeSelectOption>
          <NativeSelectOption value="vp">Vollpension</NativeSelectOption>
        </NativeSelect>
      </Eintrag>

      <Eintrag name="Combobox">
        <Combobox items={REISEZIELE}>
          <ComboboxInput placeholder="Reiseziel wählen" />
          <ComboboxContent>
            <ComboboxEmpty>Kein Reiseziel gefunden.</ComboboxEmpty>
            <ComboboxList>
              {(ziel: string) => (
                <ComboboxItem key={ziel} value={ziel}>
                  {ziel}
                </ComboboxItem>
              )}
            </ComboboxList>
          </ComboboxContent>
        </Combobox>
      </Eintrag>

      <Eintrag name="Calendar">
        <Calendar mode="single" selected={datum} onSelect={setDatum} />
      </Eintrag>

      <Eintrag name="Date Picker (Calendar + Popover)">
        <Popover>
          <PopoverTrigger render={<Button variant="outline" className="justify-start" />}>
            <CalendarIcon />
            {reisedatum ? format(reisedatum, "d. MMMM yyyy", { locale: de }) : "Reisedatum wählen"}
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0">
            <Calendar mode="single" selected={reisedatum} onSelect={setReisedatum} />
          </PopoverContent>
        </Popover>
      </Eintrag>

      <Eintrag name="Toggle">
        <Toggle aria-label="Fett">
          <BoldIcon />
        </Toggle>
        <Toggle variant="outline" aria-label="Kursiv">
          <ItalicIcon />
        </Toggle>
      </Eintrag>

      <Eintrag name="Toggle Group">
        <ToggleGroup variant="outline" defaultValue={["fett"]}>
          <ToggleGroupItem value="fett" aria-label="Fett">
            <BoldIcon />
          </ToggleGroupItem>
          <ToggleGroupItem value="kursiv" aria-label="Kursiv">
            <ItalicIcon />
          </ToggleGroupItem>
          <ToggleGroupItem value="unterstrichen" aria-label="Unterstrichen">
            <UnderlineIcon />
          </ToggleGroupItem>
        </ToggleGroup>
      </Eintrag>
    </>
  );
}