Glass Timeline

1"use client"
2 
3import * as React from "react"
4import { Check } from "lucide-react"
5import { cn } from "@/lib/utils"
6 
7interface TimelineItem {
8  id: string
9  title: string
10  description?: string
11  date?: string
12  icon?: React.ReactNode
13  status?: "completed" | "current" | "upcoming"
14}
15 
16interface GlassTimelineProps extends React.HTMLAttributes<HTMLDivElement> {
17  items: TimelineItem[]
18  orientation?: "vertical" | "horizontal"
19}
20 
21const GlassTimeline = React.forwardRef<HTMLDivElement, GlassTimelineProps>(
22  ({ className, items, orientation = "vertical", ...props }, ref) => {
23    if (orientation === "horizontal") {
24      return (
25        <div ref={ref} className={cn("w-full overflow-x-auto", className)} {...props}>
26          <div className="flex items-start gap-4 min-w-max px-4">
27            {items.map((item, index) => (
28              <div key={item.id} className="flex flex-col items-center">
29                <div className="flex items-center">
30                  {/* Node */}
31                  <GlassTimelineNode status={item.status} icon={item.icon} />
32 
33                  {/* Connector */}
34                  {index < items.length - 1 && (
35                    <div
36                      className={cn(
37                        "w-24 h-0.5 mx-2",
38                        item.status === "completed" ? "bg-linear-to-r from-cyan-500 to-blue-500" : "bg-white/20",
39                      )}
40                    />
41                  )}
42                </div>
43 
44                {/* Content */}
45                <div className="mt-4 text-center max-w-37.5">
46                  <h4 className="font-medium text-white text-sm">{item.title}</h4>
47                  {item.date && <p className="text-xs text-white/40 mt-1">{item.date}</p>}
48                  {item.description && <p className="text-xs text-white/60 mt-2">{item.description}</p>}
49                </div>
50              </div>
51            ))}
52          </div>
53        </div>
54      )
55    }
56 
57    return (
58      <div ref={ref} className={cn("relative", className)} {...props}>
59        {items.map((item, index) => (
60          <div key={item.id} className="flex gap-4 pb-8 last:pb-0">
61            {/* Node and line */}
62            <div className="flex flex-col items-center">
63              <GlassTimelineNode status={item.status} icon={item.icon} />
64              {index < items.length - 1 && (
65                <div
66                  className={cn(
67                    "w-0.5 flex-1 mt-2",
68// … truncated