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

"use client";

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
import { ChevronRightIcon, PlaneIcon } from "lucide-react";

import { Eintrag } from "@/components/galerie/eintrag";
import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";
import { Kbd, KbdGroup } from "@/components/ui/kbd";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const BUCHUNGEN = [
  { monat: "Jan", buchungen: 18 },
  { monat: "Feb", buchungen: 24 },
  { monat: "Mär", buchungen: 31 },
  { monat: "Apr", buchungen: 27 },
  { monat: "Mai", buchungen: 42 },
  { monat: "Jun", buchungen: 38 },
];

const DIAGRAMM: ChartConfig = {
  buchungen: { label: "Buchungen", color: "var(--ep-tiefblau)" },
};

const REISEN = [
  { ziel: "Island", tage: 10, preis: "2.490 €" },
  { ziel: "Japan", tage: 14, preis: "4.190 €" },
  { ziel: "Peru", tage: 16, preis: "3.780 €" },
];

export function DatenBeispiele() {
  return (
    <>
      <Eintrag name="Card">
        <Card className="w-full">
          <CardHeader>
            <CardTitle>Island Rundreise</CardTitle>
            <CardDescription>10 Tage · ab 2.490 €</CardDescription>
          </CardHeader>
          <CardContent className="text-sm">Gletscher, Geysire und Polarlichter.</CardContent>
          <CardFooter>
            <Button size="sm">Details</Button>
          </CardFooter>
        </Card>
      </Eintrag>

      <Eintrag name="Table">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Ziel</TableHead>
              <TableHead>Tage</TableHead>
              <TableHead className="text-right">Preis</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {REISEN.map((reise) => (
              <TableRow key={reise.ziel}>
                <TableCell>{reise.ziel}</TableCell>
                <TableCell>{reise.tage}</TableCell>
                <TableCell className="text-right">{reise.preis}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Eintrag>

      <Eintrag name="Avatar">
        <Avatar>
          <AvatarFallback>FB</AvatarFallback>
        </Avatar>
        <AvatarGroup>
          <Avatar>
            <AvatarFallback>AK</AvatarFallback>
          </Avatar>
          <Avatar>
            <AvatarFallback>MS</AvatarFallback>
          </Avatar>
          <Avatar>
            <AvatarFallback>LW</AvatarFallback>
          </Avatar>
        </AvatarGroup>
      </Eintrag>

      <Eintrag name="Chart">
        <ChartContainer config={DIAGRAMM} className="h-44 w-full">
          <BarChart data={BUCHUNGEN}>
            <CartesianGrid vertical={false} />
            <XAxis dataKey="monat" tickLine={false} axisLine={false} />
            <ChartTooltip content={<ChartTooltipContent />} />
            <Bar dataKey="buchungen" fill="var(--color-buchungen)" />
          </BarChart>
        </ChartContainer>
      </Eintrag>

      <Eintrag name="Carousel">
        <Carousel className="mx-12 w-full">
          <CarouselContent>
            {["Island", "Japan", "Peru"].map((ziel) => (
              <CarouselItem key={ziel}>
                <div className="flex h-28 items-center justify-center bg-accent-soft font-bold">{ziel}</div>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselPrevious />
          <CarouselNext />
        </Carousel>
      </Eintrag>

      <Eintrag name="Item">
        <Item variant="outline" className="w-full">
          <ItemMedia variant="icon">
            <PlaneIcon />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>Flug LH 450</ItemTitle>
            <ItemDescription>Frankfurt → Reykjavík · 08:40 Uhr</ItemDescription>
          </ItemContent>
          <ItemActions>
            <ChevronRightIcon className="size-4" />
          </ItemActions>
        </Item>
      </Eintrag>

      <Eintrag name="Kbd">
        <KbdGroup>
          <Kbd>Strg</Kbd>
          <Kbd>K</Kbd>
        </KbdGroup>
        <span className="text-sm text-ink-muted">öffnet die Suche</span>
      </Eintrag>
    </>
  );
}