Timeline

import { Timeline, TimelineItem, TimelineTitle, TimelineDescription, TimelineTime } from "@/components/ui/timeline";

export default function Example() {
  return <Timeline />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Timeline = forwardRef(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("relative space-y-0 pl-8", className)} {...props} />
));
Timeline.displayName = "Timeline";

const TimelineItem = forwardRef(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("relative pb-8 last:pb-0", className)} {...props}>
    <div className="absolute -left-8 top-1 flex h-6 w-6 items-center justify-center">
      <div className="h-3 w-3 rounded-full border-2 border-primary bg-background" />
    </div>
    <div className="absolute -left-[17px] top-7 h-[calc(100%-20px)] w-px bg-border last:hidden" />
  </div>
));
TimelineItem.displayName = "TimelineItem";

const TimelineTitle = forwardRef(({ className, ...props }, ref) => (
  <h4 ref={ref} className={cn("text-sm font-semibold text-foreground", className)} {...props} />
));
TimelineTitle.displayName = "TimelineTitle";

const TimelineDescription = forwardRef(({ className, ...props }, ref) => (
  <p ref={ref} className={cn("mt-1 text-sm text-muted-foreground", className)} {...props} />
));
TimelineDescription.displayName = "TimelineDescription";

const TimelineTime = forwardRef(({ className, ...props }, ref) => (
  <time ref={ref} className={cn("text-xs text-muted-foreground", className)} {...props} />
));
TimelineTime.displayName = "TimelineTime";

export { Timeline, TimelineItem, TimelineTitle, TimelineDescription, TimelineTime };