AdminandClaude Opus 5.5
78c8b702f0
- Alle 63 Komponenten aus dem shadcn-Register installiert (Stil base-luma) - Galerie unter components/galerie mit 7 Kategorien und Sprungnavigation - Inhaltsbreite auf max-w-6xl erweitert - shadcn-Hauptfarbe auf E&P-Tiefblau, größter Radius eckig - App-Titel "UI-Galerie" Co-Authored-By: Claude Opus 5.5 <[email protected]>
97 lines
2.7 KiB
TypeScript
97 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { InfoIcon, InboxIcon } from "lucide-react";
|
|
|
|
import { Eintrag } from "@/components/galerie/eintrag";
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Empty,
|
|
EmptyContent,
|
|
EmptyDescription,
|
|
EmptyHeader,
|
|
EmptyMedia,
|
|
EmptyTitle,
|
|
} from "@/components/ui/empty";
|
|
import { Progress } from "@/components/ui/progress";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import { toast } from "@/components/ui/toast";
|
|
|
|
export function FeedbackBeispiele() {
|
|
return (
|
|
<>
|
|
<Eintrag name="Alert">
|
|
<Alert>
|
|
<InfoIcon />
|
|
<AlertTitle>Hinweis</AlertTitle>
|
|
<AlertDescription>Für diese Reise ist ein gültiger Reisepass nötig.</AlertDescription>
|
|
</Alert>
|
|
<Alert variant="destructive">
|
|
<AlertTitle>Fehler</AlertTitle>
|
|
<AlertDescription>Die Buchung konnte nicht gespeichert werden.</AlertDescription>
|
|
</Alert>
|
|
</Eintrag>
|
|
|
|
<Eintrag name="Toast">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() =>
|
|
toast.add({
|
|
title: "Gespeichert",
|
|
description: "Die Reise wurde angelegt.",
|
|
type: "success",
|
|
})
|
|
}
|
|
>
|
|
Toast anzeigen
|
|
</Button>
|
|
</Eintrag>
|
|
|
|
<Eintrag name="Progress">
|
|
<Progress value={60} className="w-full" />
|
|
</Eintrag>
|
|
|
|
<Eintrag name="Skeleton">
|
|
<div className="flex w-full items-center gap-3">
|
|
<Skeleton className="size-10 rounded-full" />
|
|
<div className="flex flex-1 flex-col gap-2">
|
|
<Skeleton className="h-4 w-3/4" />
|
|
<Skeleton className="h-4 w-1/2" />
|
|
</div>
|
|
</div>
|
|
</Eintrag>
|
|
|
|
<Eintrag name="Spinner">
|
|
<Spinner />
|
|
<Button disabled>
|
|
<Spinner /> Wird geladen
|
|
</Button>
|
|
</Eintrag>
|
|
|
|
<Eintrag name="Badge">
|
|
<Badge>Neu</Badge>
|
|
<Badge variant="secondary">Entwurf</Badge>
|
|
<Badge variant="outline">Archiv</Badge>
|
|
<Badge variant="destructive">Storniert</Badge>
|
|
</Eintrag>
|
|
|
|
<Eintrag name="Empty">
|
|
<Empty className="border border-dashed">
|
|
<EmptyHeader>
|
|
<EmptyMedia variant="icon">
|
|
<InboxIcon />
|
|
</EmptyMedia>
|
|
<EmptyTitle>Noch keine Buchungen</EmptyTitle>
|
|
<EmptyDescription>Sobald jemand bucht, erscheint es hier.</EmptyDescription>
|
|
</EmptyHeader>
|
|
<EmptyContent>
|
|
<Button size="sm">Buchung anlegen</Button>
|
|
</EmptyContent>
|
|
</Empty>
|
|
</Eintrag>
|
|
</>
|
|
);
|
|
}
|