feat: Add react-sticky-box dependency

``

src/components/release-note.tsx

@@ -1,22 +1,18 @@
 import { ReleaseNote } from "@/lib/release-notes";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { CheckCheckIcon, StarIcon } from "lucide-react";
-import { Button } from "./ui/button";
-import Link from "next/link";
-import { VersionList } from "./version-list";
+import StickyBox from "react-sticky-box";
+
 export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
   return (
-    <div className="flex flex-col mt-52">
-      <div className="w-full px-10 md:px-0">
-        <div className="flex flex-col lg:flex-row-reverse items-center justify-between">
-          <VersionList currentVersion={data.version} />
-          <h1 className="text-4xl font-bold">
-            Release notes for {data.version} 🎉
-          </h1>
-        </div>
-        <p className="text-sm mt-1 font-bold text-muted-foreground">
-          {data.date}
-        </p>
+    <div className="flex border-t relative pt-36 mt-36">
+      <StickyBox className="mt-1 mx-12 text-muted-foreground text-sm h-fit" offsetTop={120}>
+        {data.date}
+      </StickyBox>
+      <div className="px-10 md:px-0">
+        <h1 className="text-4xl font-bold">
+          Release notes for {data.version} 🎉
+        </h1>
         <p className="text-md mt-4 text-muted-foreground">
           If you encounter any issues, please report them on{" "}
           <a

src/components/version-list.tsx

@@ -1,49 +0,0 @@
-"use client";
-
-import React, { useCallback, useState } from "react";
-import { Button } from "./ui/button";
-import { ChevronDown } from "lucide-react";
-import { releaseNotes } from "@/lib/release-notes";
-
-export const VersionList = React.memo(({ currentVersion }: { currentVersion: string }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const toggleDropdown = useCallback(() => {
-    setIsOpen(prev => !prev);
-  }, []);
-
-  return (
-    <div className="z-10 mb-10 lg:mb-0 pr-2">
-      <div className="relative">
-        <Button
-          variant="outline"
-          className="w-full flex justify-between items-center lg:w-auto"
-          onClick={toggleDropdown}
-        >
-          {currentVersion}
-          <ChevronDown className={`ml-2 h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
-        </Button>
-        {isOpen && (
-          <div className="absolute top-full right-0 mt-2 w-full lg:w-48 bg-background border rounded-md shadow-lg max-h-[60vh] overflow-y-auto">
-            {releaseNotes.map((note) => (
-              <a 
-                key={note.version} 
-                href={`/release-notes/${note.version}`}
-                className={`block px-4 py-2 text-sm ${
-                  note.version === currentVersion 
-                    ? 'bg-primary text-primary-foreground' 
-                    : 'hover:bg-accent'
-                }`}
-                onClick={toggleDropdown}
-              >
-                {note.version}
-              </a>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-});
-
-VersionList.displayName = 'VersionList';