Spaces:
Sleeping
Sleeping
File size: 3,095 Bytes
f871fed | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | "use client"
import { ReactNode } from "react"
import { cn } from "@/lib/utils"
interface WizardStep {
number: number
title: string
description: string
}
interface WizardContainerProps {
children: ReactNode
currentStep: number
steps: readonly WizardStep[]
onStepClick?: (step: number) => void
className?: string
}
function StepIndicator({ currentStep, steps, onStepClick }: {
currentStep: number
steps: readonly WizardStep[]
onStepClick?: (step: number) => void
}) {
return (
<div className="flex items-center justify-between px-6 py-4 border-b border-border bg-muted">
{steps.map((step, index) => {
const isCompleted = currentStep > step.number
const isCurrent = currentStep === step.number
const isClickable = step.number <= currentStep && onStepClick
return (
<div key={step.number} className="flex items-center flex-1">
<div
className={cn('flex items-center', isClickable && 'cursor-pointer')}
onClick={isClickable ? () => onStepClick(step.number) : undefined}
>
<div
className={cn(
'flex items-center justify-center w-8 h-8 rounded-full border-2 text-sm font-medium transition-colors',
isCompleted
? 'bg-primary border-primary text-primary-foreground'
: isCurrent
? 'border-primary text-primary bg-primary/10'
: 'border-border text-muted-foreground bg-card'
)}
>
{isCompleted ? "✓" : step.number}
</div>
<div className="ml-3 min-w-0">
<p className={cn(
'text-sm font-medium',
isCurrent ? 'text-foreground' : 'text-muted-foreground'
)}>
{step.title}
</p>
<p className={cn(
'text-xs',
isCurrent ? 'text-muted-foreground' : 'text-muted-foreground/80'
)}>
{step.description}
</p>
</div>
</div>
{index < steps.length - 1 && (
<div
className={cn(
'flex-1 border-t-2 mx-4 transition-colors',
isCompleted ? 'border-primary' : 'border-border/60'
)}
/>
)}
</div>
)
})}
</div>
)
}
export function WizardContainer({
children,
currentStep,
steps,
onStepClick,
className
}: WizardContainerProps) {
return (
<div className={cn('flex flex-col h-[500px] bg-card rounded-lg border border-border', className)}>
<StepIndicator
currentStep={currentStep}
steps={steps}
onStepClick={onStepClick}
/>
<div className="flex-1 overflow-hidden">
<div className="h-full overflow-y-auto px-6 py-4">
{children}
</div>
</div>
</div>
)
}
export type { WizardStep }
|