Timeline

import {
  Timeline,
  TimelineConnector,
  TimelineContent,
  TimelineDescription,
  TimelineDot,
  TimelineItem,
  TimelineSeparator,
  TimelineTitle,
} from "@/components/ui/timeline";

<Timeline>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>
      <TimelineTitle>Eat</TimelineTitle>
      <TimelineDescription>Because you need strength</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>
      <TimelineTitle>Code</TimelineTitle>
      <TimelineDescription>Because it's awesome!</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>
      <TimelineTitle>Sleep</TimelineTitle>
      <TimelineDescription>Because you need rest</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot />
    </TimelineSeparator>
    <TimelineContent>
      <TimelineTitle>Repeat</TimelineTitle>
      <TimelineDescription>
        Because this is the life you love!
      </TimelineDescription>
    </TimelineContent>
  </TimelineItem>
</Timeline>

export const TimelineTitle = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>((props, ref) => {
  const { orientation } = useTimeline();
 
  return <div ref={ref} data-orientation={orientation} {...props} />;
});
TimelineTitle.displayName = "TimelineTitle";
 
export const TimelineDescription = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ className, ...props }, ref) => {
  const { orientation } = useTimeline();
 
  return (
    <div
      ref={ref}
      data-orientation={orientation}
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  );
});
TimelineDescription.displayName = "TimelineDescription";