feat: added a scroll to top button

package.json

@@ -13,6 +13,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.0",
+    "react-icons": "^5.3.0",
+    "react-quill": "^2.0.0",
     "react-router-dom": "^6.26.2"
   },
   "devDependencies": {

src/App.jsx

@@ -1,3 +1,4 @@
+import React from "react"; 
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Home from "./pages/Home";
 import CreateBlogs from "./pages/CreateBlogs";

src/Layout.jsx

@@ -1,4 +1,5 @@
 // Layout.jsx
+import React from "react"; 
 import { Outlet } from "react-router-dom";
 import NavBar from "./components/NavBar";
 

src/components/BlogForm.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
 

src/components/Button.jsx

@@ -1,3 +1,4 @@
+import React from "react"; 
 const Button = ({ label, onClick, className }) => {
   return (
     <button

src/components/HeroSection.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 
 const HeroSection = ({ posts, autoSlideInterval = 5000 }) => {
   const [currentIndex, setCurrentIndex] = useState(0);

src/components/LoadMoreButton.jsx

@@ -1,4 +1,4 @@
-// import React from "react";
+import React from "react";
 
 const LoadMoreButton = () => {
   return (

src/components/LoginForm.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import  React, { useState } from "react";
 
 const LoginForm = () => {
   const [email, setEmail] = useState("");

src/components/NavBar.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import Sun from "./svgs/Sun";
 import Moon from "./svgs/Moon";

src/components/PostCard.jsx

@@ -1,4 +1,4 @@
-// import React from "react";
+import React from "react";
 
 const PostCard = ({ post }) => {
   return (

src/components/RecentPosts.jsx

@@ -1,4 +1,4 @@
-// import React from "react";
+import React from "react";
 import PostCard from "./PostCard";
 import LoadMoreButton from "./LoadMoreButton";
 

src/components/ScrollToTopButton.jsx

@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+import { FaChevronUp } from "react-icons/fa";
+
+const ScrollToTopButton = () => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    const handleScroll = () => {
+        if (window.scrollY > 300) {
+            setIsVisible(true);
+        } else {
+            setIsVisible(false);
+        }
+    }
+
+    const scrollToTop = () => {
+        window.scrollTo({ top: 0, behavior: "smooth" })
+    }
+
+    useEffect(() => {
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        }
+    }, [])
+    return (
+        <>
+            {isVisible && (<button onClick={scrollToTop} className='fixed bottom-7 right-4 p-4 bg-purple-100 text-purple-600 rounded-full shadow-lg  hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-all duration-300 ease-in-out transform hover:scale-110'> <FaChevronUp className="w-8 h-8"  aria-label="Scroll to top" /></button>)}
+        </>
+    )
+}
+
+export default ScrollToTopButton

src/components/svgs/Moon.jsx

@@ -10,8 +10,8 @@ const Moon = (props) => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M10.9994 3.3733C11.3211 3.69498 11.4469 4.16374 11.3295 4.60326C10.7419 6.80366 11.3123 9.24326 13.0345 10.9655C14.7567 12.6877 17.1963 13.2581 19.3967 12.6705C19.8363 12.5531 20.305 12.6789 20.6267 13.0006C20.9484 13.3223 21.0742 13.791 20.9568 14.2306C20.556 15.7314 19.7664 17.1501 18.5916 18.3249C15.0248 21.8917 9.24189 21.8917 5.67509 18.3249C2.1083 14.7581 2.1083 8.9752 5.67509 5.40841C6.84993 4.23357 8.26857 3.44398 9.76945 3.04318C10.209 2.9258 10.6777 3.05162 10.9994 3.3733Z"
       ></path>
     </svg>

src/main.jsx

@@ -1,4 +1,4 @@
-import { StrictMode } from "react";
+import React, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.jsx";
 import "./index.css";

src/pages/CreateBlogs.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import BlogForm from "../components/BlogForm";
 
 const CreateBlogs = () => {

src/pages/Home.jsx

@@ -1,6 +1,8 @@
+import React from "react";
 import Footer from "../components/Footer";
 import HeroSection from "../components/HeroSection";
 import RecentPosts from "../components/RecentPosts";
+import ScrollToTopButton from "../components/ScrollToTopButton";
 
 const Home = () => {
   const heroPosts = [
@@ -80,6 +82,7 @@ const Home = () => {
       <RecentPosts posts={blogPosts} />
 
       <Footer />
+      <ScrollToTopButton/>
     </div>
   );
 };

src/pages/Login.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import LoginForm from "../components/LoginForm";
 
 const Login = () => {

src/pages/PageNotFound.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useNavigate } from "react-router-dom";
 
 const NotFound = () => {
@@ -7,7 +8,7 @@ const NotFound = () => {
     <div className="flex flex-col justify-center items-center bg-background h-screen">
       <h4 className="text-7xl font-extrabold mb-4">404</h4>
       <p className="text-lg mb-6">
-        We can't seem to find the page you're looking for.
+        We can not seem to find the page you are looking for.
       </p>
       <button
         onClick={() => navigate("/")}