import { useState, type ReactNode } from "react";
import * as UI from "../src/index.js";
export function PreviewCase({ name }: { name: string }) {
const [value, setValue] = useState("first"),
[checked, setChecked] = useState(false),
[open, setOpen] = useState(false),
[page, setPage] = useState(1);
const controls = (
);
const action = { label: "Explore", href: "#example" };
const items = [
{
title: "Shared foundation",
description: "One theme across every interface.",
},
{
title: "Accessible controls",
description: "Clear labels and keyboard operation.",
},
];
let example: ReactNode;
switch (name) {
case "ThemeProvider":
case "AppearanceControl":
example = (
<>
Primary action
{controls}
);
break;
case "Button":
example = (
<>
Save changes
Cancel
Delete
Saving
);
break;
case "ActionLink":
example = ;
break;
case "Badge":
example = (
<>
{(["neutral", "success", "warning", "danger"] as const).map(
(tone) => (
{tone}
),
)}
);
break;
case "Input":
example = (
<>
{controls}
);
break;
case "Select":
example = (
<>
setValue(e.target.value)}
options={[
{ value: "first", label: "Production" },
{ value: "second", label: "Preview" },
]}
/>
);
break;
case "TextArea":
example = (
);
break;
case "Checkbox":
example = (
setChecked(e.target.checked)}
/>
);
break;
case "Switch":
example = (
setChecked(e.target.checked)}
/>
);
break;
case "RadioGroup":
example = (
);
break;
case "Tabs":
example = (
Overview content,
},
{
id: "second",
label: "Activity",
content: Activity content
,
},
]}
/>
);
break;
case "Modal":
example = (
<>
setOpen(true)}>Open dialog
setOpen(false)}
title="Create project"
>
{controls}
setOpen(false)}>Create project
);
break;
case "Dropdown":
example = (
setChecked(true) },
{
label: "Delete",
danger: true,
onSelect: () => setChecked(false),
},
]}
/>
);
break;
case "Notice":
example = (
Your project can use the latest release.
);
break;
case "EmptyState":
example = (
Create project}
/>
);
break;
case "AppShell":
example = (
{controls}
);
break;
case "PageHeading":
example = (
New project}
/>
);
break;
case "MetricGroup":
example = (
);
break;
case "DataTable":
example = (
row.name}
columns={[
{ key: "name", label: "Name", render: (row) => row.name },
{
key: "status",
label: "Status",
render: (row) => {row.status},
},
]}
rows={[{ id: "example", name: "Northwind", status: "Active" }]}
/>
);
break;
case "Pagination":
example = ;
break;
case "SettingsSection":
example = (
{controls}
Save changes
);
break;
case "ActivityFeed":
example = (
);
break;
case "MarketingHeader":
example = (
);
break;
case "Hero":
example = (
);
break;
case "FeatureGrid":
example = ;
break;
case "FeatureSection":
example = (
{controls}
);
break;
case "Testimonial":
example = (
);
break;
case "LogoCloud":
example = (
);
break;
case "Pricing":
example = (
);
break;
case "FAQ":
example = (
);
break;
case "CallToAction":
example = (
);
break;
case "Footer":
example = (
);
break;
case "SegmentedControl":
example = (
);
break;
case "CodeBlock":
example = (
);
break;
case "PreviewFrame":
example = ;
break;
default:
example = (
This component is not registered.
);
}
return (
{example}
);
}