Timeline

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import type * as React from "react";

const timelineVariants = cva("relative", {
  variants: {
    orientation: {
      vertical: "flex flex-col",
      horizontal: "flex flex-row overflow-x-auto pb-4",
    },
  },
  defaultVariants: {
    orientation: "vertical",
  },
});

const timelineItemVariants = cva("relative flex gap-4", {
  variants: {
    orientation: {
      vertical: "flex-row pb-8 last:pb-0",
      horizontal: "flex-col items-center min-w-[200px]",
    },
  },
  defaultVariants: {
    orientation: "vertical",
  },
});

const timelineMarkerVariants = cva(
  "relative flex-shrink-0 border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]",
  {
    variants: {
      variant: {
        default: "bg-pixel-secondary",
        success: "bg-pixel-success",
        warning: "bg-pixel-warning",
        error: "bg-pixel-error",
        primary: "bg-pixel-primary",
      },
      size: {
        sm: "w-8 h-8",
        md: "w-12 h-12",
        lg: "w-16 h-16",
      },
      shape: {
        square: "",
        circle: "rounded-full",
        diamond: "rotate-45",
      },

// ... (more code below)