8761d317ae
Layout & Display, Inputs Basic, Inputs Selection, Inputs Advanced, Navigation, Overlays, Feedback & Status, and Data sections with live interactive demos for every PettyUI component.
108 lines
4.9 KiB
XML
108 lines
4.9 KiB
XML
import { Avatar } from "pettyui/avatar";
|
|
import { Badge } from "pettyui/badge";
|
|
import { Card } from "pettyui/card";
|
|
import { Image } from "pettyui/image";
|
|
import { Separator } from "pettyui/separator";
|
|
import { Skeleton } from "pettyui/skeleton";
|
|
import { ComponentDemo } from "../component-demo";
|
|
|
|
/** Avatar demo with image and fallback variants. */
|
|
const AvatarDemo = () => (
|
|
<div class="flex items-center gap-4">
|
|
<Avatar class="w-10 h-10 rounded-full overflow-hidden">
|
|
<Avatar.Image src="https://i.pravatar.cc/80?img=3" alt="User avatar" class="w-full h-full object-cover" />
|
|
<Avatar.Fallback class="w-full h-full bg-indigo-100 text-indigo-700 flex items-center justify-center font-medium">MB</Avatar.Fallback>
|
|
</Avatar>
|
|
<Avatar class="w-10 h-10 rounded-full overflow-hidden">
|
|
<Avatar.Image src="/broken-url.jpg" alt="Broken" class="w-full h-full object-cover" />
|
|
<Avatar.Fallback class="w-full h-full bg-emerald-100 text-emerald-700 flex items-center justify-center font-medium">JD</Avatar.Fallback>
|
|
</Avatar>
|
|
</div>
|
|
);
|
|
|
|
/** Badge demo with multiple variants. */
|
|
const BadgeDemo = () => (
|
|
<div class="flex items-center gap-2">
|
|
<Badge class="px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 text-gray-700">Default</Badge>
|
|
<Badge class="px-2 py-0.5 text-xs font-medium rounded-full bg-blue-100 text-blue-700">Info</Badge>
|
|
<Badge class="px-2 py-0.5 text-xs font-medium rounded-full bg-green-100 text-green-700">Success</Badge>
|
|
<Badge class="px-2 py-0.5 text-xs font-medium rounded-full bg-yellow-100 text-yellow-700">Warning</Badge>
|
|
<Badge class="px-2 py-0.5 text-xs font-medium rounded-full bg-red-100 text-red-700">Error</Badge>
|
|
</div>
|
|
);
|
|
|
|
/** Card demo with header, content, and footer. */
|
|
const CardDemo = () => (
|
|
<Card class="border border-gray-200 rounded-lg shadow-sm max-w-sm">
|
|
<Card.Header class="px-4 pt-4">
|
|
<Card.Title class="text-lg font-semibold">Card Title</Card.Title>
|
|
<Card.Description class="text-sm text-gray-500">A short description of this card.</Card.Description>
|
|
</Card.Header>
|
|
<Card.Content class="px-4 py-3">
|
|
<p class="text-sm text-gray-700">Card body content goes here.</p>
|
|
</Card.Content>
|
|
<Card.Footer class="px-4 pb-4 flex justify-end gap-2">
|
|
<button type="button" class="px-3 py-1.5 text-sm rounded border border-gray-300 hover:bg-gray-50">Cancel</button>
|
|
<button type="button" class="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700">Save</button>
|
|
</Card.Footer>
|
|
</Card>
|
|
);
|
|
|
|
/** Image demo with working and broken sources. */
|
|
const ImageDemo = () => (
|
|
<div class="flex items-center gap-4">
|
|
<Image class="w-24 h-24 rounded-lg overflow-hidden">
|
|
<Image.Img src="https://picsum.photos/seed/pettyui/200" alt="Sample" class="w-full h-full object-cover" />
|
|
<Image.Fallback class="w-full h-full bg-gray-200 flex items-center justify-center text-gray-400 text-xs">Loading...</Image.Fallback>
|
|
</Image>
|
|
<Image class="w-24 h-24 rounded-lg overflow-hidden">
|
|
<Image.Img src="/broken.jpg" alt="Broken" class="w-full h-full object-cover" />
|
|
<Image.Fallback class="w-full h-full bg-gray-200 flex items-center justify-center text-gray-400 text-xs">No image</Image.Fallback>
|
|
</Image>
|
|
</div>
|
|
);
|
|
|
|
/** Separator demo with horizontal divider. */
|
|
const SeparatorDemo = () => (
|
|
<div>
|
|
<p class="text-sm text-gray-700 mb-2">Above the separator</p>
|
|
<Separator class="h-px bg-gray-200 my-3" />
|
|
<p class="text-sm text-gray-700">Below the separator</p>
|
|
</div>
|
|
);
|
|
|
|
/** Skeleton demo with different shapes. */
|
|
const SkeletonDemo = () => (
|
|
<div class="flex items-center gap-4">
|
|
<Skeleton class="w-10 h-10 rounded-full bg-gray-200 animate-pulse" />
|
|
<div class="space-y-2">
|
|
<Skeleton class="h-4 w-32 rounded bg-gray-200 animate-pulse" />
|
|
<Skeleton class="h-3 w-48 rounded bg-gray-200 animate-pulse" />
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
/** Layout and Display section with all display components. */
|
|
export const LayoutDisplaySection = () => (
|
|
<>
|
|
<ComponentDemo name="Avatar" description="User profile image with fallback to initials or icon when image fails to load">
|
|
<AvatarDemo />
|
|
</ComponentDemo>
|
|
<ComponentDemo name="Badge" description="Small status indicator label, typically used for counts, tags, or status">
|
|
<BadgeDemo />
|
|
</ComponentDemo>
|
|
<ComponentDemo name="Card" description="Grouped content container with header, body, and footer sections">
|
|
<CardDemo />
|
|
</ComponentDemo>
|
|
<ComponentDemo name="Image" description="Image element with fallback placeholder when the source fails to load">
|
|
<ImageDemo />
|
|
</ComponentDemo>
|
|
<ComponentDemo name="Separator" description="Visual divider between content sections or menu items">
|
|
<SeparatorDemo />
|
|
</ComponentDemo>
|
|
<ComponentDemo name="Skeleton" description="Placeholder loading indicator that mimics the shape of content being loaded">
|
|
<SkeletonDemo />
|
|
</ComponentDemo>
|
|
</>
|
|
);
|