Created more components
This commit is contained in:
@@ -65,4 +65,256 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Badge ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Badge</h2>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
$$BadgeDefault$$
|
||||
$$BadgeSecondary$$
|
||||
$$BadgeDestructive$$
|
||||
$$BadgeOutline$$
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Card ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Card</h2>
|
||||
<div class="max-w-sm">
|
||||
$$CardDemo$$
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Separator ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Separator</h2>
|
||||
<div class="space-y-4">
|
||||
<p class="text-sm text-muted-foreground">Horizontal</p>
|
||||
$$SeparatorH$$
|
||||
<p class="text-sm text-muted-foreground">Vertical (inline)</p>
|
||||
<div class="flex items-center gap-3 h-5 text-sm">
|
||||
<span>Section</span>
|
||||
$$SeparatorV$$
|
||||
<span>Another</span>
|
||||
$$SeparatorV$$
|
||||
<span>More</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Skeleton ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Skeleton</h2>
|
||||
<div class="flex flex-col gap-3 max-w-xs">
|
||||
$$SkeletonTitle$$
|
||||
$$SkeletonLine1$$
|
||||
$$SkeletonLine2$$
|
||||
$$SkeletonAvatar$$
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Avatar ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Avatar</h2>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
$$AvatarSm$$
|
||||
$$AvatarDefault$$
|
||||
$$AvatarLg$$
|
||||
$$AvatarImg$$
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Progress ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Progress</h2>
|
||||
<div class="flex flex-col gap-4 max-w-md">
|
||||
$$Progress25$$
|
||||
$$Progress60$$
|
||||
$$Progress100$$
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Alert ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Alert</h2>
|
||||
<div class="flex flex-col gap-3 max-w-lg">
|
||||
$$AlertDefault$$
|
||||
$$AlertDestructive$$
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Breadcrumb ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Breadcrumb</h2>
|
||||
$$BreadcrumbDemo$$
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Checkbox ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Checkbox</h2>
|
||||
<div class="flex flex-col gap-3">
|
||||
$$CheckboxAccept$$
|
||||
$$CheckboxChecked$$
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── RadioGroup ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Radio Group</h2>
|
||||
<div class="flex flex-wrap gap-8">
|
||||
$$RadioGroupCol$$
|
||||
$$RadioGroupRow$$
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Switch ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Switch</h2>
|
||||
<div class="flex flex-col gap-3">
|
||||
$$SwitchOff$$
|
||||
$$SwitchOn$$
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Textarea ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Textarea</h2>
|
||||
<div class="max-w-md">
|
||||
$$TextareaDemo$$
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Slider ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Slider</h2>
|
||||
<div class="flex flex-col gap-4 max-w-md">
|
||||
$$SliderDemo$$
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── File Input ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">File Input</h2>
|
||||
<div class="max-w-md">
|
||||
$$FileInputDemo$$
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Table ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Table</h2>
|
||||
$$TableDemo$$
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Pagination ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Pagination</h2>
|
||||
$$PaginationDemo$$
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Tabs ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Tabs</h2>
|
||||
<div class="max-w-lg">
|
||||
$$TabsDemo$$
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Accordion ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Accordion</h2>
|
||||
<div class="max-w-lg">
|
||||
$$AccordionDemo$$
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Tooltip ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Tooltip</h2>
|
||||
<div class="flex flex-wrap gap-6 items-center pt-4">
|
||||
$$TooltipTop$$
|
||||
$$TooltipBottom$$
|
||||
$$TooltipRight$$
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Toast ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Toast</h2>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<button type="button"
|
||||
onclick="showToast({ title: 'Saved!', description: 'Your changes have been saved.' })"
|
||||
class="inline-flex items-center justify-center rounded-md bg-primary text-primary-foreground h-10 px-4 py-2 text-sm font-medium transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
|
||||
Show Toast
|
||||
</button>
|
||||
<button type="button"
|
||||
onclick="showToast({ title: 'Error', description: 'Something went wrong.', variant: 'destructive' })"
|
||||
class="inline-flex items-center justify-center rounded-md bg-destructive text-destructive-foreground h-10 px-4 py-2 text-sm font-medium transition-colors hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
|
||||
Show Error Toast
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Dialog ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Dialog</h2>
|
||||
<button type="button" data-dialog-open="demo-dialog"
|
||||
class="inline-flex items-center justify-center rounded-md border border-input bg-background h-10 px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
|
||||
Open Dialog
|
||||
</button>
|
||||
$$DialogDemo$$
|
||||
</section>
|
||||
|
||||
<hr class="border-border" />
|
||||
|
||||
<!-- ── Dropdown Menu ── -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-lg font-semibold text-foreground">Dropdown Menu</h2>
|
||||
$$DropdownDemo$$
|
||||
</section>
|
||||
|
||||
<!-- Toast viewport (fixed, outside the flow) -->
|
||||
$$ToastViewportDemo$$
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user