Timeline

import {
  Timeline,
  TimelineContent,
  TimelineDot,
  TimelineHeading,
  TimelineItem,
  TimelineLine,
} from "~/components/ui/timeline"

<Timeline>
  <TimelineItem status="done">
    <TimelineHeading>Plan!</TimelineHeading>
    <TimelineDot status="done" />
    <TimelineLine done />
    <TimelineContent>
      Before diving into coding, it is crucial to plan your software project
      thoroughly.
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineHeading>Done!</TimelineHeading>
    <TimelineDot />
  </TimelineItem>
</Timeline>