From f1f2eab28d55da2ed5c568062e17c5087f49b4c2 Mon Sep 17 00:00:00 2001 From: Ajay-Dhangar Date: Wed, 5 Jun 2024 09:47:49 +0530 Subject: [PATCH] nw resolver and fixed bugs --- .../bottom/ScrollToBottomButton.module.css | 18 ----------------- .../bottom/ScrollTopToBottom.module.css | 20 +++++++++++++++++++ ...BottomButton.jsx => ScrollTopToButton.jsx} | 14 +++++++------ ...lToTopButton.jsx => ScrollBottomToTop.jsx} | 4 ++-- .../Buttons/top/ScrollBottomToTop.module.css | 20 +++++++++++++++++++ .../Buttons/top/ScrollToTopButton.module.css | 18 ----------------- src/components/HomePage/ResourcesSection.tsx | 8 ++++---- src/pages/index.tsx | 8 ++++---- 8 files changed, 58 insertions(+), 52 deletions(-) delete mode 100644 src/components/Buttons/bottom/ScrollToBottomButton.module.css create mode 100644 src/components/Buttons/bottom/ScrollTopToBottom.module.css rename src/components/Buttons/bottom/{ScrollToBottomButton.jsx => ScrollTopToButton.jsx} (65%) rename src/components/Buttons/top/{ScrollToTopButton.jsx => ScrollBottomToTop.jsx} (88%) create mode 100644 src/components/Buttons/top/ScrollBottomToTop.module.css delete mode 100644 src/components/Buttons/top/ScrollToTopButton.module.css diff --git a/src/components/Buttons/bottom/ScrollToBottomButton.module.css b/src/components/Buttons/bottom/ScrollToBottomButton.module.css deleted file mode 100644 index e8ce027e9..000000000 --- a/src/components/Buttons/bottom/ScrollToBottomButton.module.css +++ /dev/null @@ -1,18 +0,0 @@ -.scrollToBottomButton { - position: fixed; - bottom: 10px; - right: 20px; - border-radius: 30px; - background-color: transparent; - border: 1px solid #ccc; - padding: 10px; - box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); - cursor: pointer; - z-index: 1000; - transition: background-color 0.3s, box-shadow 0.3s; -} - -.scrollToBottomButton:hover { - background-color: var(--ifm-color-primary-dark); - box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2); -} diff --git a/src/components/Buttons/bottom/ScrollTopToBottom.module.css b/src/components/Buttons/bottom/ScrollTopToBottom.module.css new file mode 100644 index 000000000..994c534ff --- /dev/null +++ b/src/components/Buttons/bottom/ScrollTopToBottom.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; +} \ No newline at end of file diff --git a/src/components/Buttons/bottom/ScrollToBottomButton.jsx b/src/components/Buttons/bottom/ScrollTopToButton.jsx similarity index 65% rename from src/components/Buttons/bottom/ScrollToBottomButton.jsx rename to src/components/Buttons/bottom/ScrollTopToButton.jsx index 0d3a3691c..74342bd6d 100644 --- a/src/components/Buttons/bottom/ScrollToBottomButton.jsx +++ b/src/components/Buttons/bottom/ScrollTopToButton.jsx @@ -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() { ) ); -} +} \ No newline at end of file diff --git a/src/components/Buttons/top/ScrollToTopButton.jsx b/src/components/Buttons/top/ScrollBottomToTop.jsx similarity index 88% rename from src/components/Buttons/top/ScrollToTopButton.jsx rename to src/components/Buttons/top/ScrollBottomToTop.jsx index 295d42956..fd05c6d37 100644 --- a/src/components/Buttons/top/ScrollToTopButton.jsx +++ b/src/components/Buttons/top/ScrollBottomToTop.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 = () => { diff --git a/src/components/Buttons/top/ScrollBottomToTop.module.css b/src/components/Buttons/top/ScrollBottomToTop.module.css new file mode 100644 index 000000000..2952cd218 --- /dev/null +++ b/src/components/Buttons/top/ScrollBottomToTop.module.css @@ -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; +} diff --git a/src/components/Buttons/top/ScrollToTopButton.module.css b/src/components/Buttons/top/ScrollToTopButton.module.css deleted file mode 100644 index 1df83474a..000000000 --- a/src/components/Buttons/top/ScrollToTopButton.module.css +++ /dev/null @@ -1,18 +0,0 @@ -.scrollToTopButton { - position: fixed; - bottom: 50px; - right: 20px; - border-radius: 30px; - background-color: transparent; - border: 1px solid #ccc; - padding: 10px; - box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); - cursor: pointer; - z-index: 1000; - transition: background-color 0.3s, box-shadow 0.3s; -} - -.scrollToTopButton:hover { - background-color: var(--ifm-color-primary-dark); - box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2); -} diff --git a/src/components/HomePage/ResourcesSection.tsx b/src/components/HomePage/ResourcesSection.tsx index e56c2c4d7..fc9b371e7 100644 --- a/src/components/HomePage/ResourcesSection.tsx +++ b/src/components/HomePage/ResourcesSection.tsx @@ -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: diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 60b0361d8..e3d5ddadf 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -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() { - - + + );