chore: Initialize the next roadmap farm

docusaurus.config.js

@@ -154,6 +154,11 @@ const config = {
               },
             ],
           },
+          {
+            to: '/roadmap',
+            position: "left",
+            label: "Roadmap",
+          },
           {
             type: "docsVersionDropdown",
             position: "right",

package.json

@@ -58,7 +58,7 @@
     "@swc/core": "^1.3.99",
     "babel-loader": "^9.1.3",
     "clsx": "^1.2.1",
-    "framer-motion": "^11.2.10",
+    "framer-motion": "^11.2.13",
     "shiki": "^1.7.0",
     "shikiji": "^0.9.10",
     "swc-loader": "^0.2.3",

src/components/ui/timeline.tsx

@@ -1,208 +1,81 @@
-import React from 'react'
-import type { VariantProps } from 'class-variance-authority'
-import { cva } from 'class-variance-authority'
-import { Check, Circle, X } from 'lucide-react'
-
-import { cn } from '../../lib/utils'
-
-const timelineVariants = cva('grid', {
-  variants: {
-    positions: {
-      left: '[&>li]:grid-cols-[0_min-content_1fr]',
-      right: '[&>li]:grid-cols-[1fr_min-content]',
-      center: '[&>li]:grid-cols-[1fr_min-content_1fr]',
-    },
-  },
-  defaultVariants: {
-    positions: 'left',
-  },
-})
-
-interface TimelineProps
-  extends React.HTMLAttributes<HTMLUListElement>,
-  VariantProps<typeof timelineVariants> { }
-
-const Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(
-  ({ children, className, positions, ...props }, ref) => {
-    return (
-      <ul
-        className={cn(timelineVariants({ positions }), className)}
-        ref={ref}
-        {...props}
-      >
-        {children}
-      </ul>
-    )
-  },
-)
-Timeline.displayName = 'Timeline'
-
-const timelineItemVariants = cva('grid items-center gap-x-2', {
-  variants: {
-    status: {
-      done: 'text-primary',
-      default: 'text-muted-foreground',
-    },
-  },
-  defaultVariants: {
-    status: 'default',
-  },
-})
+"use client";
+import {
+  useMotionValueEvent,
+  useScroll,
+  useTransform,
+  motion,
+} from "framer-motion";
+import React, { useEffect, useRef, useState } from "react";
+
+interface TimelineEntry {
+  title: string;
+  content: React.ReactNode;
+}
 
-interface TimelineItemProps
-  extends React.HTMLAttributes<HTMLLIElement>,
-  VariantProps<typeof timelineItemVariants> { }
+export const Timeline = ({ data }: { data: TimelineEntry[] }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState(0);
 
-const TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(
-  ({ className, status, ...props }, ref) => (
-    <li
-      className={cn(timelineItemVariants({ status }), className)}
-      ref={ref}
-      {...props}
-    />
-  ),
-)
-TimelineItem.displayName = 'TimelineItem'
+  useEffect(() => {
+    if (ref.current) {
+      const rect = ref.current.getBoundingClientRect();
+      setHeight(rect.height);
+    }
+  }, [ref]);
 
-const timelineDotVariants = cva(
-  'col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border border-current',
-  {
-    variants: {
-      status: {
-        default: '[&>*]:hidden',
-        current:
-          '[&>*:not(.lucide-circle)]:hidden [&>.lucide-circle]:fill-current [&>.lucide-circle]:text-current',
-        done: 'bg-primary [&>*:not(.lucide-check)]:hidden [&>.lucide-check]:text-background',
-        error:
-          'border-destructive bg-destructive [&>*:not(.lucide-x)]:hidden [&>.lucide-x]:text-background',
-        custom: '[&>*:not(:nth-child(4))]:hidden [&>*:nth-child(4)]:block',
-      },
-    },
-    defaultVariants: {
-      status: 'default',
-    },
-  },
-)
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start 10%", "end 50%"],
+  });
 
-interface TimelineDotProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-  VariantProps<typeof timelineDotVariants> {
-  customIcon?: React.ReactNode
-}
+  const heightTransform = useTransform(scrollYProgress, [0, 1], [0, height]);
+  const opacityTransform = useTransform(scrollYProgress, [0, 0.1], [0, 1]);
 
-const TimelineDot = React.forwardRef<HTMLDivElement, TimelineDotProps>(
-  ({ className, status, customIcon, ...props }, ref) => (
+  return (
     <div
-      role="status"
-      className={cn('timeline-dot', timelineDotVariants({ status }), className)}
-      ref={ref}
-      {...props}
+      className="w-full bg-white dark:bg-neutral-950 font-sans md:px-10"
+      ref={containerRef}
     >
-      <Circle className="size-2.5" />
-      <Check className="size-3" />
-      <X className="size-3" />
-      {customIcon}
-    </div>
-  ),
-)
-TimelineDot.displayName = 'TimelineDot'
-
-const timelineContentVariants = cva(
-  'row-start-2 row-end-2 pb-8 text-muted-foreground',
-  {
-    variants: {
-      side: {
-        right: 'col-start-3 col-end-4 mr-auto text-left',
-        left: 'col-start-1 col-end-2 ml-auto text-right',
-      },
-    },
-    defaultVariants: {
-      side: 'right',
-    },
-  },
-)
-
-interface TimelineContentProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-  VariantProps<typeof timelineContentVariants> { }
 
-const TimelineContent = React.forwardRef<HTMLDivElement, TimelineContentProps>(
-  ({ className, side, ...props }, ref) => (
-    <div
-      className={cn(timelineContentVariants({ side }), className)}
-      ref={ref}
-      {...props}
-    />
-  ),
-)
-TimelineContent.displayName = 'TimelineContent'
-
-const timelineHeadingVariants = cva(
-  'row-start-1 row-end-1 line-clamp-1 max-w-full truncate',
-  {
-    variants: {
-      side: {
-        right: 'col-start-3 col-end-4 mr-auto text-left',
-        left: 'col-start-1 col-end-2 ml-auto text-right',
-      },
-      variant: {
-        primary: 'text-base font-medium text-primary',
-        secondary: 'text-sm font-light text-muted-foreground',
-      },
-    },
-    defaultVariants: {
-      side: 'right',
-      variant: 'primary',
-    },
-  },
-)
-
-interface TimelineHeadingProps
-  extends React.HTMLAttributes<HTMLParagraphElement>,
-  VariantProps<typeof timelineHeadingVariants> { }
-
-const TimelineHeading = React.forwardRef<
-  HTMLParagraphElement,
-  TimelineHeadingProps
->(({ className, side, variant, ...props }, ref) => (
-  <p
-    role="heading"
-    aria-level={variant === 'primary' ? 2 : 3}
-    className={cn(timelineHeadingVariants({ side, variant }), className)}
-    ref={ref}
-    {...props}
-  />
-))
-TimelineHeading.displayName = 'TimelineHeading'
-
-interface TimelineLineProps extends React.HTMLAttributes<HTMLHRElement> {
-  done?: boolean
-}
-
-const TimelineLine = React.forwardRef<HTMLHRElement, TimelineLineProps>(
-  ({ className, done = false, ...props }, ref) => {
-    return (
-      <hr
-        role="separator"
-        aria-orientation="vertical"
-        className={cn(
-          'col-start-2 col-end-3 row-start-2 row-end-2 mx-auto flex h-full min-h-16 w-0.5 justify-center rounded-full',
-          done ? 'bg-primary' : 'bg-muted',
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  },
-)
-TimelineLine.displayName = 'TimelineLine'
-
-export {
-  Timeline,
-  TimelineDot,
-  TimelineItem,
-  TimelineContent,
-  TimelineHeading,
-  TimelineLine,
-}
+      <div ref={ref} className="relative max-w-7xl mx-auto pb-20">
+        {data.map((item, index) => (
+          <div
+            key={index}
+            className="flex justify-start pt-10 md:gap-10"
+          >
+            <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">
+              <div className="h-10 absolute left-3 md:left-3 w-10 rounded-full bg-white dark:bg-black flex items-center justify-center">
+                <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" />
+              </div>
+              <h3 className="hidden md:block text-xl md:pl-20 md:text-5xl font-bold text-neutral-500 dark:text-neutral-500 ">
+                {item.title}
+              </h3>
+            </div>
+
+            <div className="relative pl-20 pr-4 md:pl-4 w-full">
+              <h3 className="md:hidden block text-2xl mb-4 text-left font-bold text-neutral-500 dark:text-neutral-500">
+                {item.title}
+              </h3>
+              {item.content}{" "}
+            </div>
+          </div>
+        ))}
+        <div
+          style={{
+            height: height + "px",
+          }}
+          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%)] "
+        >
+          <motion.div
+            style={{
+              height: heightTransform,
+              opacity: opacityTransform,
+            }}
+            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"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};