Timeline component

1"use client";
2 
3import {
4  Children,
5  cloneElement,
6  createContext,
7  CSSProperties,
8  HTMLAttributes,
9  ReactElement,
10  useContext,
11  useLayoutEffect,
12  useRef,
13  useState
14} from "react";
15import { cn } from "@/lib/utils";
16import { cva, VariantProps } from "class-variance-authority";
17 
18// CSS VARIANTS
19 
20// Dot in the center of the timeline item
21const timelineDotVariants = cva(
22  "relative h-4 w-4 rounded-full z-10 flex items-center justify-center",
23  {
24    variants: {
25      variant: {
26        default: "border-primary",
27        secondary: "border-secondary",
28        destructive: "border-destructive",
29        outline: ""
30      },
31      hollow: {
32        true: "border-2 bg-card",
33        false: "border-2"
34      }
35    },
36    compoundVariants: [
37      {
38        hollow: false,
39        variant: "default",
40        class: "bg-primary"
41      },
42      {
43        hollow: false,
44        variant: "secondary",
45        class: "bg-secondary"
46      },
47      {
48        hollow: false,
49        variant: "destructive",
50        class: "bg-destructive"
51      },
52      {
53        hollow: false,
54        variant: "outline",
55        class: "bg-background"
56      }
57    ],
58    defaultVariants: {
59      variant: "default",
60      hollow: false
61    }
62  }
63);
64 
65// Card container
66const timelineItemVariants = cva(
67  "flex flex-col rounded-md transition-all p-4 shrink-0",
68  {
69    variants: {
70      variant: {
71        default: "bg-card border text-card-foreground shadow-sm",
72        secondary: "bg-secondary text-secondary-foreground shadow-sm",
73        destructive:
74          "bg-destructive/10 border border-destructive/20 text-destructive-foreground shadow-sm",
75        outline: "bg-transparent border shadow-sm"
76      },
77      noCards: {
78        true: "border-none shadow-none bg-transparent",
79        false: ""
80      }
81    },
82    defaultVariants: {
83      variant: "default",
84      noCards: false
85    }
86  }
87);
88 
89// Branch connecting dot to card
90const timelineBranchVariants = cva("absolute z-0", {
91  variants: {
92    variant: {
93      default: "bg-primary",
94      secondary: "bg-secondary",
95      destructive: "bg-destructive",
96      outline: "bg-border"
97    }
98  },
99  defaultVariants: {
100    variant: "default"
101  }
102});
103 
104// Timeline layout container
105const timelineLayoutVariants = cva("grid relative", {
106  variants: {
107    orientation: {
108      horizontal: "grid-flow-col grid-rows-[min-content_2rem_min-content]",
109      vertical: "grid-cols-[1fr_2rem_1fr] auto-rows-min"
110    }
111  },
112  defaultVariants: {
113// … truncated