{
  "name": "timeline",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/timeline.tsx",
      "content": "\"use client\";\nimport {\n  useMotionValueEvent,\n  useScroll,\n  useTransform,\n  motion,\n} from \"motion/react\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\ninterface TimelineEntry {\n  title: string;\n  content: React.ReactNode;\n}\n\nexport const Timeline = ({ data }: { data: TimelineEntry[] }) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [height, setHeight] = useState(0);\n\n  useEffect(() => {\n    if (ref.current) {\n      const rect = ref.current.getBoundingClientRect();\n      setHeight(rect.height);\n    }\n  }, [ref]);\n\n  const { scrollYProgress } = useScroll({\n    target: containerRef,\n    offset: [\"start 10%\", \"end 50%\"],\n  });\n\n  const heightTransform = useTransform(scrollYProgress, [0, 1], [0, height]);\n  const opacityTransform = useTransform(scrollYProgress, [0, 0.1], [0, 1]);\n\n  return (\n    <div\n      className=\"w-full bg-white dark:bg-neutral-950 font-sans md:px-10\"\n      ref={containerRef}\n    >\n      <div className=\"max-w-7xl mx-auto py-20 px-4 md:px-8 lg:px-10\">\n        <h2 className=\"text-lg md:text-4xl mb-4 text-black dark:text-white max-w-4xl\">\n          Changelog from my journey\n        </h2>\n        <p className=\"text-neutral-700 dark:text-neutral-300 text-sm md:text-base max-w-sm\">\n          I&apos;ve been working on Aceternity for the past 2 years. Here&apos;s\n          a timeline of my journey.\n        </p>\n      </div>\n\n      <div ref={ref} className=\"relative max-w-7xl mx-auto pb-20\">\n        {data.map((item, index) => (\n          <div\n            key={index}\n            className=\"flex justify-start pt-10 md:pt-40 md:gap-10\"\n          >\n            <div className=\"sticky flex flex-col md:flex-row z-40 items-center top-40 self-start max-w-xs lg:max-w-sm md:w-full\">\n              <div className=\"h-10 absolute left-3 md:left-3 w-10 rounded-full bg-white dark:bg-black flex items-center justify-center\">\n                <div className=\"h-4 w-4 rounded-full bg-neutral-200 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 p-2\" />\n              </div>\n              <h3 className=\"hidden md:block text-xl md:pl-20 md:text-5xl font-bold text-neutral-500 dark:text-neutral-500 \">\n                {item.title}\n              </h3>\n            </div>\n\n            <div className=\"relative pl-20 pr-4 md:pl-4 w-full\">\n              <h3 className=\"md:hidden block text-2xl mb-4 text-left font-bold text-neutral-500 dark:text-neutral-500\">\n                {item.title}\n              </h3>\n              {item.content}{\" \"}\n            </div>\n          </div>\n        ))}\n        <div\n          style={{\n            height: height + \"px\",\n          }}\n          className=\"absolute md:left-8 left-8 top-0 overflow-hidden w-[2px] bg-[linear-gradient(to_bottom,var(--tw-gradient-stops))] from-transparent from-[0%] via-neutral-200 dark:via-neutral-700 to-transparent to-[99%]  [mask-image:linear-gradient(to_bottom,transparent_0%,black_10%,black_90%,transparent_100%)] \"\n        >\n          <motion.div\n            style={{\n              height: heightTransform,\n              opacity: opacityTransform,\n            }}\n            className=\"absolute inset-x-0 top-0  w-[2px] bg-gradient-to-t from-purple-500 via-blue-500 to-transparent from-[0%] via-[10%] rounded-full\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/timeline.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Timeline"
}