From da5cf81a65dcfac23efcefc1544d6e3a77f2a72c Mon Sep 17 00:00:00 2001
From: Sourabh Singh Rawat <103349890+Sourabh782@users.noreply.github.com>
Date: Fri, 9 Aug 2024 00:07:45 +0530
Subject: [PATCH] feat: added scroll indicator (#418)

---
 src/app/page.tsx                          |  2 ++
 src/components/ProgressBar/index.tsx      | 20 ++++++++++++++++++++
 src/components/pages/contribute/index.tsx |  6 ++++--
 3 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ProgressBar/index.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5ea22ff4..2ec021bc 100644
--- a/src/app/page.tsx
+++ b/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 />
diff --git a/src/components/ProgressBar/index.tsx b/src/components/ProgressBar/index.tsx
new file mode 100644
index 00000000..00e7b7c5
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/components/pages/contribute/index.tsx b/src/components/pages/contribute/index.tsx
index d2c007e2..a1a639ac 100644
--- a/src/components/pages/contribute/index.tsx
+++ b/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 />