nw resolver and fixed bugs

Author: ajay-dhangar

src/components/Buttons/bottom/ScrollToBottomButton.module.css

@@ -0,0 +1,20 @@
+.scrollToBottomButton {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #28a745;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 10px;
+  cursor: pointer;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  transition: opacity 0.3s;
+  opacity: 0.8;
+  z-index: 1000;
+}
+
+.scrollToBottomButton:hover {
+  background-color: #218838;
+  opacity: 1;
+}

src/components/Buttons/bottom/ScrollTopToBottom.module.css

@@ -1,21 +1,23 @@
 import React, { useEffect, useState } from "react";
 import { FaArrowDown } from "react-icons/fa";
-import styles from "./ScrollToBottomButton.module.css";
+import styles from "./ScrollTopToBottom.module.css";
 
-export default function ScrollToBottomButton() {
-  const [showButton, setShowButton] = useState(true);
+export default function ScrollTopToBottom() {
+  const [showButton, setShowButton] = useState(false);
 
   const scrollToBottom = () => {
     window.scrollTo({
       top: document.documentElement.scrollHeight,
       behavior: "smooth",
     });
-    setShowButton(false);
   };
 
   const handleScroll = () => {
-    if (window.scrollY === 0) {
+    const bottomThreshold = document.documentElement.scrollHeight - window.innerHeight - 100;
+    if (window.scrollY < bottomThreshold) {
       setShowButton(true);
+    } else {
+      setShowButton(false);
     }
   };
 
@@ -33,4 +35,4 @@ export default function ScrollToBottomButton() {
       </button>
     )
   );
-}
+}

src/components/Buttons/bottom/ScrollToBottomButton.jsx renamed to src/components/Buttons/bottom/ScrollTopToButton.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { FaArrowUp } from "react-icons/fa";
-import styles from "./ScrollToTopButton.module.css";
+import styles from "./ScrollBottomToTop.module.css";
 
-export default function ScrollToTopButton() {
+export default function ScrollBottomToTop() {
   const [showButton, setShowButton] = useState(false);
 
   const scrollToTop = () => {

src/components/Buttons/top/ScrollToTopButton.jsx renamed to src/components/Buttons/top/ScrollBottomToTop.jsx

@@ -0,0 +1,20 @@
+.scrollToTopButton {
+  position: fixed;
+  bottom: 80px;
+  right: 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 10px;
+  cursor: pointer;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  transition: opacity 0.3s;
+  opacity: 0.8;
+  z-index: 1000;
+}
+
+.scrollToTopButton:hover {
+  background-color: #0056b3;
+  opacity: 1;
+}

src/components/Buttons/top/ScrollBottomToTop.module.css

@@ -18,7 +18,7 @@ interface Resource {
 
 const ALL_RESOURCES: Resource[] = [
   {
-    url: "https://www.codeharborhub.live/docs/",
+    url: "https://codeharborhub.github.io/docs/",
     type: "tutorial",
     title: "Tutorial: For Beginners",
     description:
@@ -27,7 +27,7 @@ const ALL_RESOURCES: Resource[] = [
     duration: "10 min",
   },
   {
-    url: "https://www.codeharborhub.live/courses/",
+    url: "https://codeharborhub.github.io/courses/",
     type: "courses",
     title: "Courses: For Advanced Users",
     description:
@@ -36,7 +36,7 @@ const ALL_RESOURCES: Resource[] = [
     duration: "3 min",
   },
   {
-    url: "https://www.codeharborhub.live/blog/",
+    url: "https://codeharborhub.github.io/blog/",
     type: "blog",
     title: "Blog: For All Users",
     description:
@@ -45,7 +45,7 @@ const ALL_RESOURCES: Resource[] = [
     duration: "7 min",
   },
   {
-    url: "https://www.codeharborhub.live/dsa/",
+    url: "https://codeharborhub.github.io/dsa/",
     type: "dsa",
     title: "DSA: For Competitive Programmers",
     description:

src/components/Buttons/top/ScrollToTopButton.module.css

@@ -12,8 +12,8 @@ import Tweet from "../components/Tweet";
 import Tweets, { type TweetItem } from "../data/tweets";
 import { motion } from "framer-motion";
 import ResourcesSection from "../components/HomePage/ResourcesSection";
-import ScrollToTopButton from "../components/Buttons/bottom/ScrollToBottomButton";
-import ScrollToBottomButton from "../components/Buttons/top/ScrollToTopButton";
+import ScrollTopToButton from "../components/Buttons/bottom/ScrollTopToButton";
+import ScrollBottomToTop from "../components/Buttons/top/ScrollBottomToTop";
 
 function TweetsSection() {
   const tweetColumns = [[], [], []];
@@ -145,8 +145,8 @@ export default function Home() {
 
         <TweetsSection />
 
-        <ScrollToTopButton />
-        <ScrollToBottomButton />
+        <ScrollTopToButton />
+        <ScrollBottomToTop />
       </main>
     </Layout>
   );