Copy
import ToolbarExpandable from "@/components/ui/toolbar-expandable";

Copy
const steps = [
  {
    id: "step1",
    title: "First Step",
    description: "Description of the first step",
    icon: Settings,
    content: <div>Step 1 content</div>,
  },
  // ... more steps
]
 
<ToolbarExpandable steps={steps} badgeText="WORKFLOW" />

Copy
 
const [expanded, setExpanded] = useState(false)
const [activeStep, setActiveStep] = useState<string | null>(null)
 
<ToolbarExpandable
  steps={steps}
  badgeText="CONTROLLED"
  expanded={expanded}
  onExpandedChange={setExpanded}
  activeStep={activeStep}
  onActiveStepChange={setActiveStep}
/>

Copy
interface DynamicStep {
  id: string;
  title: string;
  description: string;
  icon:
    | React.ComponentType<{ className?: string }>
    | React.ReactElement<{ className?: string }>;
  content: React.ReactNode;
}

Copy
const deploymentSteps = [
  {
    id: "setup",
    title: "Project Setup",
    description: "Initialize your project with the required dependencies.",
    icon: Settings,
    content: <ProjectSetupForm />,
  },
  {
    id: "configure",
    title: "Configuration",
    description: "Set up environment variables and project settings.",
    icon: Database,
    content: <ConfigurationForm />,
  },
  {
    id: "deploy",
    title: "Deploy",
    description: "Deploy your application to production.",
    icon: Rocket,
    content: <DeploymentForm />,
  },
]
 
<ToolbarExpandable steps={deploymentSteps} badgeText="DEPLOYMENT" />

Copy
const downloadSteps = [
  {
    id: "format",
    title: "Choose Format",
    description: "Select the download format that best suits your needs.",
    icon: Download,
    content: <FormatSelector />,
  },
  {
    id: "options",
    title: "Download Options",
    description: "Configure additional options for your download.",
    icon: Settings,
    content: <OptionsForm />,
  },
]
 
<ToolbarExpandable steps={downloadSteps} badgeText="DOWNLOAD" />