Stepper

import {
	Stepper,
	StepperContent,
	StepperDescription,
	StepperIndicator,
	StepperItem,
	StepperNav,
	StepperPanel,
	StepperSeparator,
	StepperTitle,
	StepperTrigger,
} from "@/components/ui/stepper"

const steps = [
	{ step: 1, title: "Cart", description: "Review items" },
	{ step: 2, title: "Shipping", description: "Address details" },
	{ step: 3, title: "Payment", description: "Billing method" },
]
 
<Stepper defaultValue={1} className="space-y-6">
	<StepperNav>
		{steps.map((item, index) => (
			<StepperItem key={item.step} step={item.step}>
				<StepperTrigger>
					<StepperIndicator>{item.step}</StepperIndicator>
					<span className="text-left">
						<StepperTitle>{item.title}</StepperTitle>
						<StepperDescription>{item.description}</StepperDescription>
					</span>
				</StepperTrigger>
				{index < steps.length - 1 && <StepperSeparator />}
			</StepperItem>
		))}
	</StepperNav>
 
	<StepperPanel>
		{steps.map((item) => (
			<StepperContent key={item.step} value={item.step}>
				{item.title}
			</StepperContent>
		))}
	</StepperPanel>
</Stepper>