// title: Checkout steps with back and continue "use client"; import { useState } from "react"; import { Button } from "@/registry/default/ui/button"; import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, } from "@/registry/default/ui/stepper"; const steps = [ { body: "3 items · $248.00", description: "Review items", title: "Cart" }, { body: "Maya Patel, 221 Mission St, San Francisco, CA 94105", description: "Where it's going", title: "Shipping", }, { body: "Visa ending 4242 · billing address same as shipping", description: "Card or wallet", title: "Payment", }, { body: "Arrives Thu, Oct 22. We'll email the receipt to maya@acme.dev.", description: "Place order", title: "Confirm", }, ]; export default function Particle() { const [step, setStep] = useState(2); const current = steps[step - 1]; return (

{steps.map((s, i) => ( step}>

{s.title} {s.description}

))}

{current ? current.title : "Order placed"}

{current ? current.body : "Order #4821 is confirmed. Thanks, Maya!"}

); }