Steps

import { Steps } from "@vortex/ui-cals"
 
const steps = [
  { title: "요구사항 분석" },
  { title: "설계" },
  { title: "개발" },
  { title: "테스트" },
  { title: "배포" },
]
 
<Steps steps={steps} active={2} />

const [active, setActive] = useState(0)
 
<Steps steps={steps} active={active} onActiveChange={setActive} />

<Steps title="프로젝트 진행 현황" steps={steps} active={3} />

<Steps
  steps={[
    { title: "접수", controlStyle: { borderColor: "#4f46e5", color: "#4f46e5" } },
    { title: "검토", controlStyle: { borderColor: "#059669", color: "#059669" } },
    { title: "승인", controlStyle: { borderColor: "#dc2626", color: "#dc2626" } },
  ]}
  active={1}
/>

<Steps
  steps={[
    { title: "단계 1" },
    { title: "숨김 단계", hidden: true },
    { title: "단계 3" },
  ]}
  active={0}
/>

<Steps
  steps={steps}
  active={1}
  backgroundColor="#f8fafc"
  color="#334155"
/>