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 = (
Internal link
External link ↗
Disabled link
);
return content;
}
/** Breadcrumbs demo with 3-level trail. */
function BreadcrumbsDemo() {
const content = (
Home/Components/Breadcrumbs
);
return content;
}
/** Tabs demo with 3 content panels. */
function TabsDemo() {
const content = (
AccountPasswordSettingsAccount settings contentPassword settings contentGeneral settings content
);
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 = (
{(item) => (
{item.title}
▾{item.content}
)}
);
return content;
}
/** Collapsible demo with expand/collapse toggle. */
function CollapsibleDemo() {
const content = (
▶ Show more details
Here are the additional details that were hidden. Click again to collapse.
);
return content;
}
/** Pagination demo with page navigation. */
function PaginationDemo() {
const content = ;
return content;
}
/** NavigationMenu demo with dropdown submenu. */
function NavigationMenuDemo() {
const content = (
HomeProducts ▾Widget AWidget BAbout
);
return content;
}
/** Wizard step indicators helper for the wizard demo. */
function WizardSteps() {
const content = (
{(label, i) => (
{i() + 1}
{label}
)}
);
return content;
}
/** Wizard demo with 3-step flow. */
function WizardDemo() {
const content = (
Step 1: Enter your details here.Step 2: Review your information.Step 3: Confirm and submit.
PreviousNext
);
return content;
}
/** Navigation section with all navigation components. */
export function NavigationSection() {
const content = (
<>
);
return content;
}