Animated Timeline

import { AnimatedTimeline, type TimelineItemBase } from "@/components/library/animated-timeline"
import { DustField } from "@/components/library/dust-field"

const items: TimelineItemBase[] = [
  {
    id: "workspace",
    title: "Unified Workspace",
    period: "2023 — Present",
    description: "Connected platform contexts into one system.",
    thumbnailSrc: "/favicon.svg",
    thumbnailAlt: "Workspace orb",
  },
]

export default function Example() {
  return (
    <AnimatedTimeline
      items={items}
      orientation="vertical"
      renderThumbnail={(item) => (
        <div className="h-full w-full overflow-hidden rounded-2xl">
          <DustField src={item.thumbnailSrc ?? "/favicon.svg"} className="h-full w-full" optimized />
        </div>
      )}
    />
  )
}