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]>
51 lines
2.1 KiB
TypeScript
51 lines
2.1 KiB
TypeScript
import { ChatBeispiele } from "@/components/galerie/beispiele/chat";
|
|
import { DatenBeispiele } from "@/components/galerie/beispiele/daten";
|
|
import { FeedbackBeispiele } from "@/components/galerie/beispiele/feedback";
|
|
import { FormularBeispiele } from "@/components/galerie/beispiele/formulare";
|
|
import { LayoutBeispiele } from "@/components/galerie/beispiele/layout";
|
|
import { NavigationBeispiele } from "@/components/galerie/beispiele/navigation";
|
|
import { OverlayBeispiele } from "@/components/galerie/beispiele/overlays";
|
|
import { Toaster } from "@/components/ui/toast";
|
|
import { TooltipProvider } from "@/components/ui/tooltip";
|
|
|
|
// Alle shadcn/ui-Komponenten aus components/ui, nach Kategorien geordnet.
|
|
// Neue Komponente: in der passenden Datei unter beispiele/ eine <Eintrag>-Kachel ergänzen.
|
|
const KATEGORIEN = [
|
|
{ id: "formulare", titel: "Formulare & Eingaben", Inhalt: FormularBeispiele },
|
|
{ id: "navigation", titel: "Navigation", Inhalt: NavigationBeispiele },
|
|
{ id: "overlays", titel: "Overlays & Menüs", Inhalt: OverlayBeispiele },
|
|
{ id: "feedback", titel: "Feedback & Status", Inhalt: FeedbackBeispiele },
|
|
{ id: "daten", titel: "Datenanzeige", Inhalt: DatenBeispiele },
|
|
{ id: "layout", titel: "Layout", Inhalt: LayoutBeispiele },
|
|
{ id: "chat", titel: "Chat & KI", Inhalt: ChatBeispiele },
|
|
];
|
|
|
|
export function Galerie() {
|
|
return (
|
|
<TooltipProvider>
|
|
<nav aria-label="Kategorien" className="mb-10 flex flex-wrap gap-x-5 gap-y-2 text-sm">
|
|
{KATEGORIEN.map((kategorie) => (
|
|
<a key={kategorie.id} href={`#${kategorie.id}`}>
|
|
{kategorie.titel}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="flex flex-col gap-14">
|
|
{KATEGORIEN.map(({ id, titel, Inhalt }) => (
|
|
<section key={id} id={id} aria-labelledby={`${id}-titel`} className="scroll-mt-6">
|
|
<h2 id={`${id}-titel`} className="ep-ueberschrift mb-6 text-2xl">
|
|
{titel}
|
|
</h2>
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
<Inhalt />
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
|
|
<Toaster />
|
|
</TooltipProvider>
|
|
);
|
|
}
|