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]>
108 lines
3.8 KiB
TypeScript
108 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronsUpDownIcon } from "lucide-react";
|
|
|
|
import { Eintrag } from "@/components/galerie/eintrag";
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
|
import { DirectionProvider } from "@/components/ui/direction";
|
|
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { Slider } from "@/components/ui/slider";
|
|
|
|
const LAENDER = [
|
|
"Argentinien", "Australien", "Chile", "China", "Costa Rica", "Indien", "Island", "Japan",
|
|
"Kanada", "Kenia", "Marokko", "Namibia", "Neuseeland", "Norwegen", "Peru", "Vietnam",
|
|
];
|
|
|
|
export function LayoutBeispiele() {
|
|
return (
|
|
<>
|
|
<Eintrag name="Accordion">
|
|
<Accordion className="w-full">
|
|
<AccordionItem value="leistungen">
|
|
<AccordionTrigger>Was ist enthalten?</AccordionTrigger>
|
|
<AccordionContent>Flug, Hotel, Frühstück und Reiseleitung.</AccordionContent>
|
|
</AccordionItem>
|
|
<AccordionItem value="storno">
|
|
<AccordionTrigger>Wie storniere ich?</AccordionTrigger>
|
|
<AccordionContent>Bis 30 Tage vor Abreise kostenlos.</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
</Eintrag>
|
|
|
|
<Eintrag name="Collapsible">
|
|
<Collapsible className="w-full">
|
|
<CollapsibleTrigger render={<Button variant="ghost" size="sm" />}>
|
|
Reiseverlauf anzeigen <ChevronsUpDownIcon />
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent className="mt-2 flex flex-col gap-1 text-sm text-ink-muted">
|
|
<p>Tag 1: Ankunft in Reykjavík</p>
|
|
<p>Tag 2: Golden Circle</p>
|
|
<p>Tag 3: Südküste</p>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
</Eintrag>
|
|
|
|
<Eintrag name="Aspect Ratio">
|
|
<div className="w-full">
|
|
<AspectRatio ratio={16 / 9} className="flex items-center justify-center bg-accent-soft text-sm">
|
|
16 : 9
|
|
</AspectRatio>
|
|
</div>
|
|
</Eintrag>
|
|
|
|
<Eintrag name="Resizable">
|
|
<ResizablePanelGroup orientation="horizontal" className="min-h-28 border">
|
|
<ResizablePanel defaultSize="50%">
|
|
<div className="flex h-full items-center justify-center text-sm">Links</div>
|
|
</ResizablePanel>
|
|
<ResizableHandle withHandle />
|
|
<ResizablePanel defaultSize="50%">
|
|
<div className="flex h-full items-center justify-center text-sm">Rechts</div>
|
|
</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
</Eintrag>
|
|
|
|
<Eintrag name="Scroll Area">
|
|
<ScrollArea className="h-36 w-full border">
|
|
<div className="p-3">
|
|
{LAENDER.map((land, index) => (
|
|
<div key={land}>
|
|
{index > 0 && <Separator className="my-2" />}
|
|
<p className="text-sm">{land}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
</Eintrag>
|
|
|
|
<Eintrag name="Separator">
|
|
<div className="flex h-5 items-center gap-3 text-sm">
|
|
<span>Flüge</span>
|
|
<Separator orientation="vertical" />
|
|
<span>Hotels</span>
|
|
<Separator orientation="vertical" />
|
|
<span>Mietwagen</span>
|
|
</div>
|
|
</Eintrag>
|
|
|
|
<Eintrag name="Direction (rechts nach links)">
|
|
<DirectionProvider direction="rtl">
|
|
<div dir="rtl" className="w-full">
|
|
<Slider defaultValue={[30]} max={100} />
|
|
</div>
|
|
</DirectionProvider>
|
|
</Eintrag>
|
|
</>
|
|
);
|
|
}
|