8761d317ae
Layout & Display, Inputs Basic, Inputs Selection, Inputs Advanced, Navigation, Overlays, Feedback & Status, and Data sections with live interactive demos for every PettyUI component.
202 lines
9.3 KiB
TypeScript
202 lines
9.3 KiB
TypeScript
import { For } from "solid-js";
|
|
import { Link } from "pettyui/link";
|
|
import { Breadcrumbs } from "pettyui/breadcrumbs";
|
|
import { Tabs } from "pettyui/tabs";
|
|
import { Accordion } from "pettyui/accordion";
|
|
import { Collapsible } from "pettyui/collapsible";
|
|
import { Pagination } from "pettyui/pagination";
|
|
import { NavigationMenu } from "pettyui/navigation-menu";
|
|
import { Wizard } from "pettyui/wizard";
|
|
import { ComponentDemo } from "../component-demo";
|
|
|
|
/** Link demo with internal, external, and disabled variants. */
|
|
function LinkDemo() {
|
|
const content = (
|
|
<div class="flex items-center gap-4">
|
|
<Link href="#" class="text-sm text-indigo-600 hover:underline">Internal link</Link>
|
|
<Link href="https://example.com" external class="text-sm text-indigo-600 hover:underline">External link ↗</Link>
|
|
<Link href="#" disabled class="text-sm text-gray-400 cursor-not-allowed">Disabled link</Link>
|
|
</div>
|
|
);
|
|
return content;
|
|
}
|
|
|
|
/** Breadcrumbs demo with 3-level trail. */
|
|
function BreadcrumbsDemo() {
|
|
const content = (
|
|
<Breadcrumbs class="flex items-center gap-1 text-sm">
|
|
<Breadcrumbs.Item>
|
|
<Breadcrumbs.Link href="#" class="text-gray-500 hover:text-gray-700">Home</Breadcrumbs.Link>
|
|
<Breadcrumbs.Separator class="text-gray-300 mx-1">/</Breadcrumbs.Separator>
|
|
</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item>
|
|
<Breadcrumbs.Link href="#" class="text-gray-500 hover:text-gray-700">Components</Breadcrumbs.Link>
|
|
<Breadcrumbs.Separator class="text-gray-300 mx-1">/</Breadcrumbs.Separator>
|
|
</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item>
|
|
<span class="text-gray-900 font-medium">Breadcrumbs</span>
|
|
</Breadcrumbs.Item>
|
|
</Breadcrumbs>
|
|
);
|
|
return content;
|
|
}
|
|
|
|
/** Tabs demo with 3 content panels. */
|
|
function TabsDemo() {
|
|
const content = (
|
|
<Tabs defaultValue="tab-1" class="w-full">
|
|
<Tabs.List class="flex border-b border-gray-200">
|
|
<Tabs.Tab value="tab-1" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[selected]:border-indigo-600 data-[selected]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Account</Tabs.Tab>
|
|
<Tabs.Tab value="tab-2" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[selected]:border-indigo-600 data-[selected]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Password</Tabs.Tab>
|
|
<Tabs.Tab value="tab-3" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[selected]:border-indigo-600 data-[selected]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Settings</Tabs.Tab>
|
|
</Tabs.List>
|
|
<Tabs.Panel value="tab-1" class="p-4 text-sm text-gray-700">Account settings content</Tabs.Panel>
|
|
<Tabs.Panel value="tab-2" class="p-4 text-sm text-gray-700">Password settings content</Tabs.Panel>
|
|
<Tabs.Panel value="tab-3" class="p-4 text-sm text-gray-700">General settings content</Tabs.Panel>
|
|
</Tabs>
|
|
);
|
|
return content;
|
|
}
|
|
|
|
const accordionItems = [
|
|
{ value: "item-1", title: "What is PettyUI?", content: "A headless SolidJS component library." },
|
|
{ value: "item-2", title: "Is it accessible?", content: "Yes, all components follow WAI-ARIA patterns." },
|
|
{ value: "item-3", title: "Can I style it?", content: "Absolutely. It's headless — bring your own styles." },
|
|
];
|
|
|
|
/** Accordion demo with 3 collapsible sections. */
|
|
function AccordionDemo() {
|
|
const content = (
|
|
<Accordion class="w-full max-w-md border border-gray-200 rounded divide-y divide-gray-200">
|
|
<For each={accordionItems}>
|
|
{(item) => (
|
|
<Accordion.Item value={item.value}>
|
|
<Accordion.Header>
|
|
<Accordion.Trigger class="w-full flex items-center justify-between px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50">
|
|
{item.title}
|
|
<span class="text-gray-400">▾</span>
|
|
</Accordion.Trigger>
|
|
</Accordion.Header>
|
|
<Accordion.Content class="px-4 pb-3 text-sm text-gray-500">{item.content}</Accordion.Content>
|
|
</Accordion.Item>
|
|
)}
|
|
</For>
|
|
</Accordion>
|
|
);
|
|
return content;
|
|
}
|
|
|
|
/** Collapsible demo with expand/collapse toggle. */
|
|
function CollapsibleDemo() {
|
|
const content = (
|
|
<Collapsible class="w-full max-w-md">
|
|
<Collapsible.Trigger class="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-gray-900">
|
|
<span>▶</span> Show more details
|
|
</Collapsible.Trigger>
|
|
<Collapsible.Content class="mt-2 p-3 bg-gray-50 rounded text-sm text-gray-600">
|
|
Here are the additional details that were hidden. Click again to collapse.
|
|
</Collapsible.Content>
|
|
</Collapsible>
|
|
);
|
|
return content;
|
|
}
|
|
|
|
/** Pagination demo with page navigation. */
|
|
function PaginationDemo() {
|
|
const content = <Pagination count={50} itemsPerPage={10} class="flex items-center gap-1" />;
|
|
return content;
|
|
}
|
|
|
|
/** NavigationMenu demo with dropdown submenu. */
|
|
function NavigationMenuDemo() {
|
|
const content = (
|
|
<NavigationMenu class="relative">
|
|
<NavigationMenu.List class="flex items-center gap-1">
|
|
<NavigationMenu.Item>
|
|
<NavigationMenu.Link href="#" class="px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">Home</NavigationMenu.Link>
|
|
</NavigationMenu.Item>
|
|
<NavigationMenu.Item>
|
|
<NavigationMenu.Trigger class="px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">Products ▾</NavigationMenu.Trigger>
|
|
<NavigationMenu.Content class="absolute top-full left-0 mt-1 p-2 border border-gray-200 rounded bg-white shadow-lg z-10 min-w-48">
|
|
<NavigationMenu.Link href="#" class="block px-3 py-1.5 text-sm text-gray-700 hover:bg-indigo-50 rounded">Widget A</NavigationMenu.Link>
|
|
<NavigationMenu.Link href="#" class="block px-3 py-1.5 text-sm text-gray-700 hover:bg-indigo-50 rounded">Widget B</NavigationMenu.Link>
|
|
</NavigationMenu.Content>
|
|
</NavigationMenu.Item>
|
|
<NavigationMenu.Item>
|
|
<NavigationMenu.Link href="#" class="px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">About</NavigationMenu.Link>
|
|
</NavigationMenu.Item>
|
|
</NavigationMenu.List>
|
|
</NavigationMenu>
|
|
);
|
|
return content;
|
|
}
|
|
|
|
/** Wizard step indicators helper for the wizard demo. */
|
|
function WizardSteps() {
|
|
const content = (
|
|
<Wizard.StepList class="flex items-center gap-2 mb-4">
|
|
<For each={["Details", "Review", "Confirm"]}>
|
|
{(label, i) => (
|
|
<Wizard.Step index={i()} class="flex items-center gap-2">
|
|
<Wizard.StepTrigger class="w-7 h-7 rounded-full border-2 flex items-center justify-center text-xs font-medium data-[active]:border-indigo-600 data-[active]:text-indigo-600 data-[completed]:bg-indigo-600 data-[completed]:text-white data-[completed]:border-indigo-600 border-gray-300 text-gray-400">
|
|
{i() + 1}
|
|
</Wizard.StepTrigger>
|
|
<span class="text-sm text-gray-600">{label}</span>
|
|
</Wizard.Step>
|
|
)}
|
|
</For>
|
|
</Wizard.StepList>
|
|
);
|
|
return content;
|
|
}
|
|
|
|
/** Wizard demo with 3-step flow. */
|
|
function WizardDemo() {
|
|
const content = (
|
|
<Wizard class="w-full max-w-md">
|
|
<WizardSteps />
|
|
<Wizard.StepContent index={0} class="p-4 border border-gray-200 rounded mb-4 text-sm text-gray-700">Step 1: Enter your details here.</Wizard.StepContent>
|
|
<Wizard.StepContent index={1} class="p-4 border border-gray-200 rounded mb-4 text-sm text-gray-700">Step 2: Review your information.</Wizard.StepContent>
|
|
<Wizard.StepContent index={2} class="p-4 border border-gray-200 rounded mb-4 text-sm text-gray-700">Step 3: Confirm and submit.</Wizard.StepContent>
|
|
<div class="flex gap-2">
|
|
<Wizard.Prev class="px-3 py-1.5 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-40">Previous</Wizard.Prev>
|
|
<Wizard.Next class="px-3 py-1.5 text-sm bg-indigo-600 text-white rounded hover:bg-indigo-700 disabled:opacity-40">Next</Wizard.Next>
|
|
</div>
|
|
</Wizard>
|
|
);
|
|
return content;
|
|
}
|
|
|
|
/** Navigation section with all navigation components. */
|
|
export function NavigationSection() {
|
|
const content = (
|
|
<>
|
|
<ComponentDemo name="Link" description="Navigation anchor element with external link and disabled support">
|
|
<LinkDemo />
|
|
</ComponentDemo>
|
|
<ComponentDemo name="Breadcrumbs" description="Navigation trail showing the current page location within a hierarchy">
|
|
<BreadcrumbsDemo />
|
|
</ComponentDemo>
|
|
<ComponentDemo name="Tabs" description="Tabbed interface for switching between different views or sections of content">
|
|
<TabsDemo />
|
|
</ComponentDemo>
|
|
<ComponentDemo name="Accordion" description="Vertically stacked sections that expand/collapse to show content">
|
|
<AccordionDemo />
|
|
</ComponentDemo>
|
|
<ComponentDemo name="Collapsible" description="Content section that can be expanded or collapsed with a trigger">
|
|
<CollapsibleDemo />
|
|
</ComponentDemo>
|
|
<ComponentDemo name="Pagination" description="Navigation for paginated content with page numbers and controls">
|
|
<PaginationDemo />
|
|
</ComponentDemo>
|
|
<ComponentDemo name="NavigationMenu" description="Horizontal navigation bar with dropdown submenus">
|
|
<NavigationMenuDemo />
|
|
</ComponentDemo>
|
|
<ComponentDemo name="Wizard" description="Multi-step flow with step indicators and navigation">
|
|
<WizardDemo />
|
|
</ComponentDemo>
|
|
</>
|
|
);
|
|
return content;
|
|
}
|