feat: Add react-sticky-box dependency

``

package.json

@@ -45,6 +45,7 @@
     "react-hook-form": "^7.52.2",
     "react-markdown": "^9.0.1",
     "react-spring": "^9.7.4",
+    "react-sticky-box": "^2.0.5",
     "react-sticky-el": "^2.1.0",
     "styled-components": "^6.1.12",
     "tailwind-merge": "^2.5.1",

src/app/release-notes/[version]/page.tsx

@@ -38,35 +38,5 @@ export default function ReleaseNotePage({ params }: { params: { version: string
     );
   }
 
-  const prevNote = releaseNotes[currentIndex + 1];
-  const nextNote = releaseNotes[currentIndex - 1];
-
-  return (
-    <main className="flex min-h-screen flex-col items-center">    
-      <div className='w-full lg:w-1/2 px-5 md:px-10 lg:px-0'>
-        <ReleaseNote data={releaseNote} />
-        <div className="flex flex-col md:flex-row items-center justify-between h-fit px-4 lg:px-0 pb-4 mt-8">
-          {prevNote && (
-            <a href={`/release-notes/${prevNote.version}`} className='mx-auto md:mx-0'>
-              <Button variant="outline" className="flex items-center">
-                <ChevronLeft className="mr-2 h-4 w-4" />
-                Previous ({prevNote.version})
-              </Button>
-            </a>
-          )}
-          <a href="/download" className='mx-auto md:mx-4'>
-            <Button className="mt-4 md:mt-0 w-fit">Download Zen now!</Button>
-          </a>
-          {nextNote && (
-            <a href={`/release-notes/${nextNote.version}`} className="mt-4 mx-auto md:mx-0 md:mt-0">
-              <Button variant="outline" className="flex items-center ">
-                Next ({nextNote.version})
-                <ChevronRight className="ml-2 h-4 w-4" />
-              </Button>
-            </a>
-          )}
-        </div>
-      </div>
-    </main>
-  );
+  return redirect(`/release-notes#${version}`);
 }

src/app/release-notes/page.tsx

@@ -2,31 +2,18 @@
 
 import Footer from "@/components/footer";
 import { Navigation } from "@/components/navigation";
+import ReleaseNoteElement from "@/components/release-note";
 import { releaseNoteIsAlpha, releaseNotes } from "@/lib/release-notes";
 import Link from "next/link";
 
 export default function ReleaseNotes() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-start">
-      <div className="min-h-screen py-42 flex justify-center flex-col">
+      <div className="min-h-screen py-42 flex justify-center flex-col px-10 lg:px-0 md:w-2/3 lg:w-1/2">
         <h1 className="text-4xl text-center font-bold mt-24">Release Notes</h1>
-        <div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10">
-          {releaseNotes.map((releaseNote) => (
-            <a href={`/release-notes/${releaseNote.version}`} className="bg-background relative max-w-64 overflow-hidden rounded-lg border p-5 hover:border-blue-500 transition-all duration-300 hover:-translate-y-1 hover:-translate-x-1" key={releaseNote.version}>
-              <div className="text-md font-medium mb-5">
-                {releaseNote.version}
-              </div>
-              <div className="text-muted-foreground text-sm font-medium">
-                Check out the new features and improvements for {releaseNote.version}
-              </div>
-              {releaseNoteIsAlpha(releaseNote) && (
-                <div className="absolute top-0 right-0 bg-blue-500 text-white text-xs font-medium p-1 rounded-bl-lg">
-                  Alpha Release
-                </div>
-              )}
-            </a>
-          ))}
-        </div>
+        {releaseNotes.map((releaseNote) => (
+          <ReleaseNoteElement key={releaseNote.version} data={releaseNote} />
+        ))}
       </div>
     </main>
   )

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';