feat: added scroll indicator (#418)

Author: Sourabh782

src/app/page.tsx

@@ -3,6 +3,7 @@ import Footer from "@/components/core/footer";
 import Navbar from "@/components/core/navbar";
 import { cookies } from "next/headers";
 import { getGithubStars } from "@/helper/getGithubStars";
+import ProgressBar from "@/components/ProgressBar";
 
 export default async function Home() {
   const starCount: number = await getGithubStars();
@@ -13,6 +14,7 @@ export default async function Home() {
 
   return (
     <>
+      <ProgressBar start={"origin-left"} />
       <Navbar starCount={starCount} />
       <HomePage accountId={accountId} />
       <Footer />

src/components/ProgressBar/index.tsx

@@ -0,0 +1,20 @@
+"use client"
+import { motion, useScroll, useSpring } from "framer-motion";
+
+const ProgressBar = ({start}: {start: string}) => {
+    const { scrollYProgress } = useScroll();
+    const scaleX = useSpring(scrollYProgress, {
+        stiffness: 100,
+        damping: 30,
+        restDelta: 0.001,
+    });
+
+  return (
+    <motion.div
+      className={`fixed top-0 left-0 right-0 h-2 bg-primary ${start} z-[51]`}
+      style={{ scaleX }}
+    />
+  )
+}
+
+export default ProgressBar

src/components/pages/contribute/index.tsx

@@ -5,6 +5,7 @@ import Footer from "@/components/core/footer";
 import Navbar from "@/components/core/navbar";
 import { Forking, AppwriteSetup, DevSetup } from "@/components/core/contributionSections";
 import { motion, useScroll, useSpring } from "framer-motion";
+import ProgressBar from "@/components/ProgressBar";
 
 // Component to render the contribution guide with dynamic tabs
 export default function Contribute() {
@@ -75,10 +76,11 @@ export default function Contribute() {
         </article>
         <article>
           <Tabs currentTab={currentTab || ""} />
-          <motion.div
+          {/* <motion.div
             className="fixed bottom-0 left-0 right-0 h-2 bg-primary origin-center"
             style={{ scaleX }}
-          />
+          /> */}
+          <ProgressBar start={"origin-center"} />
         </article>
       </section>
       <Footer />