mats.bosson/PettyUI
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix showcase Wizard nesting

Browse Source 
StepContent requires WizardStepContext provided by Wizard.Step.
This commit is contained in:
Mats Bosson 2026-03-30 03:48:47 +07:00
parent 48d047e5d5
commit ac1306edd9
1 changed files with 18 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/showcase/src/sections/navigation.tsx
View File

@ -131,33 +131,29 @@ function NavigationMenuDemo() {
return content; return content;
} }
/** Wizard step indicators helper for the wizard demo. */ const wizardSteps = ["Details", "Review", "Confirm"];
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. */ /** Wizard demo with 3-step flow. */
function WizardDemo() { function WizardDemo() {
const content = ( const content = (
<Wizard class="w-full max-w-md"> <Wizard class="w-full max-w-md">
<WizardSteps /> <Wizard.StepList class="flex items-center gap-4 mb-4">
<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> <For each={wizardSteps}>
<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> {(label, i) => (
<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> <Wizard.Step index={i()}>
<div 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>
</div>
<Wizard.StepContent class="p-4 border border-gray-200 rounded my-4 text-sm text-gray-700">
Step {i() + 1}: {label}
</Wizard.StepContent>
</Wizard.Step>
)}
</For>
</Wizard.StepList>
<div class="flex gap-2"> <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.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> <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>