Merge pull request #160 from dhawal-793/main

Feature: added back To Top button

package.json

@@ -15,7 +15,8 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-lazy-load-image-component": "^1.5.6"
+    "react-lazyload": "^3.2.0",
+    "react-scroll": "^1.8.9"
   },
   "devDependencies": {
     "@types/react": "^18.0.33",

src/App.jsx

@@ -3,6 +3,7 @@ import Header from './components/header'
 import Card from './components/card'
 import Footer from './components/footer'
 import products from './DB/product.json'
+import BackToTopButton from './components/BackToTop'
 
 function App() {
   const [category, setCategory] = useState('all')
@@ -64,6 +65,7 @@ function App() {
         length={filteredProducts.length}
       />
       <Footer />
+      <BackToTopButton />
     </>
   )
 }

src/components/BackToTop.jsx

@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from 'react'
+import { ArrowUp } from "./Icons"
+import { Link } from 'react-scroll'
+
+const BackToTopButton = () => {
+    const [btnVisiblity, setBtnVisiblity] = useState(false)
+    const handleScroll = () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' })
+    }
+    useEffect(() => {
+        const toggleVisiblity = () => {
+            window.pageYOffset > 250 ? setBtnVisiblity(true) : setBtnVisiblity(false);
+        }
+        window.addEventListener('scroll', toggleVisiblity);
+        return () => {
+            window.removeEventListener('scroll', toggleVisiblity);
+        }
+    }, [])
+
+
+    return (
+        <Link onClick={handleScroll} to="Top" smooth duration={500}>
+            <div className={` ${!btnVisiblity ?"transition-before": "transition-after"} backToTopButton`}>
+                <ArrowUp />
+            </div>
+        </Link>
+    )
+}
+
+export default BackToTopButton;

src/components/Icons.jsx

@@ -33,7 +33,7 @@ const All = () => {
 const Jobs = () => {
     return (
         <>
-            <svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" viewBox="0 0 500 380" width="20" height="25" className="icons">
+            <svg xmlns="http://www.w3.org/2000/svg" fillRule="evenodd" viewBox="0 0 500 380" width="20" height="25" className="icons">
                 <path d="M120.31 165.84h223.17a5.62 5.62 0 0 1 5.61 5.61v95.56c0 3.08-2.53 5.6-5.61 5.6H120.31c-3.08 0-5.61-2.52-5.61-5.6v-95.56c0-3.09 2.53-5.61 5.61-5.61zM223.35 0c61.61 0 117.49 25.07 157.96 65.38 40.48 40.48 65.39 96.19 65.39 157.97 0 45.06-13.44 87.18-36.38 122.24L507 450.96l-66.69 60.96-93.24-102.58c-35.4 23.59-78 37.36-123.72 37.36-61.61 0-117.49-25.07-157.97-65.38C24.91 340.84 0 285.13 0 223.35c0-61.61 25.07-117.49 65.38-157.97C105.86 24.91 161.57 0 223.35 0zm140.27 83.08c-35.89-35.89-85.54-58.17-140.27-58.17-54.73 0-104.38 22.28-140.27 58.17-35.89 35.89-58.17 85.54-58.17 140.27 0 52.99 20.89 101.22 54.79 136.81V131.55c0-4.57 3.71-8.28 8.28-8.28H375.8c4.58 0 8.29 3.71 8.29 8.28v208.07c23.69-32.68 37.7-72.88 37.7-116.27 0-54.73-22.29-104.38-58.17-140.27zM96.27 375.67c34.42 28.76 78.77 46.12 127.08 46.12 54.73 0 104.38-22.28 140.27-58.17 1.32-1.32 2.62-2.66 3.9-4.02V139.84H96.27v235.83zm30.94-60.5c-5.1 0-9.24-4.13-9.24-9.23 0-5.1 4.14-9.24 9.24-9.24h80.18c5.1 0 9.23 4.14 9.23 9.24 0 5.1-4.13 9.23-9.23 9.23h-80.18zm130.13 42.6a9.27 9.27 0 0 1-9.27-9.27 9.27 9.27 0 0 1 9.27-9.27h78.92a9.27 9.27 0 0 1 9.27 9.27 9.27 9.27 0 0 1-9.27 9.27h-78.92zm-130.13-.03c-5.1 0-9.24-4.14-9.24-9.24 0-5.1 4.14-9.24 9.24-9.24h80.18c5.1 0 9.23 4.14 9.23 9.24 0 5.1-4.13 9.24-9.23 9.24h-80.18zm130.13-42.54c-5.12 0-9.27-4.15-9.27-9.26a9.27 9.27 0 0 1 9.27-9.27h78.92a9.27 9.27 0 0 1 9.27 9.27c0 5.11-4.15 9.26-9.27 9.26h-78.92zm-82.13-123.84h16.62v30.27c0 6.35-.54 11.19-1.63 14.51-1.08 3.31-3.26 6.13-6.55 8.44-3.28 2.29-7.48 3.45-12.6 3.45-5.41 0-9.6-.77-12.57-2.28-2.98-1.52-5.28-3.74-6.9-6.67-1.62-2.92-2.58-6.54-2.87-10.85l15.8-2.23c.02 2.44.23 4.25.62 5.43.38 1.2 1.05 2.15 1.98 2.89.64.48 1.54.71 2.71.71 1.86 0 3.22-.71 4.09-2.14.86-1.43 1.3-3.84 1.3-7.23v-34.3zm25.66 27.91c0-9.1 2.43-16.18 7.31-21.24 4.88-5.08 11.66-7.6 20.37-7.6 8.92 0 15.8 2.49 20.63 7.46 4.82 4.98 7.23 11.96 7.23 20.92 0 6.51-1.05 11.85-3.15 16.01-2.11 4.17-5.17 7.41-9.15 9.73-3.99 2.32-8.96 3.48-14.91 3.48-6.04 0-11.04-1-15.01-3-3.95-2.01-7.17-5.17-9.63-9.51-2.46-4.32-3.69-9.74-3.69-16.25zm16.54.04c0 5.61 1.01 9.66 3.02 12.11 2.02 2.45 4.77 3.69 8.24 3.69 3.55 0 6.32-1.21 8.27-3.61 1.95-2.41 2.93-6.72 2.93-12.96 0-5.24-1.03-9.07-3.06-11.48-2.05-2.43-4.8-3.63-8.3-3.63-3.34 0-6.03 1.23-8.05 3.68-2.04 2.45-3.05 6.53-3.05 12.2zm48.12-27.95h31.03c5.16 0 9.13 1.34 11.9 4 2.77 2.65 4.15 5.95 4.15 9.88 0 3.3-.98 6.13-2.97 8.47-1.31 1.59-3.24 2.82-5.77 3.74 3.85.96 6.67 2.61 8.49 4.96 1.81 2.34 2.72 5.29 2.72 8.83 0 2.89-.65 5.49-1.93 7.8-1.3 2.31-3.07 4.12-5.3 5.47-1.4.83-3.5 1.44-6.3 1.82-3.73.5-6.2.76-7.43.76h-28.59v-55.73zm16.69 22.56h7.23c2.58 0 4.39-.46 5.4-1.38 1.01-.93 1.52-3.65 1.52-5.41 0-1.62-.52-2.89-1.52-3.8-1.01-.91-2.79-1.37-5.29-1.37h-7.34v11.96zm0 21.88h8.45c2.85 0 4.86-.54 6.04-1.59 1.17-1.05 1.76-3.83 1.76-5.6 0-1.65-.58-2.98-1.74-3.97-1.16-1-3.19-1.51-6.1-1.51h-8.41v12.67z" />
             </svg>
         </>
@@ -210,8 +210,6 @@ const Movies = () => {
 		C502.467,260.973,488.813,250.733,475.16,255.853"/>
                     <path fill="#63D3FD" d="M186.733,323.267h-128c-9.387,0-17.067-7.68-17.067-17.067v-17.067
 		c0-9.387,7.68-17.067,17.067-17.067h128c9.387,0,17.067,7.68,17.067,17.067V306.2C203.8,315.587,196.12,323.267,186.733,323.267"/>
-                    <path fill="#3DB9F9" d="M186.733,272.067h-25.6c9.387,0,17.067,7.68,17.067,17.067V306.2c0,9.387-7.68,17.067-17.067,17.067
-		h25.6c9.387,0,17.067-Z7.68,17.067-17.067v-17.067C203.8,279.747,196.12,272.067,186.733,272.067"/>
                     <g>
                         <path fill="#FFE100" d="M195.267,144.067c0-52.053-41.813-93.867-93.867-93.867S7.533,92.013,7.533,144.067
 			s41.813,93.867,93.867,93.867S195.267,196.12,195.267,144.067"/>
@@ -363,4 +361,14 @@ const Tools = () => {
     )
 }
 
-export { GitHub, Twitter, All, Jobs, ResumeBuilder, AI, Hacker, Movies, Extensions, Tools };
+const ArrowUp = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" >
+            <path fill="#ffffff"
+                d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z" />
+        </svg>
+    )
+}
+
+
+export { GitHub, Twitter, All, Jobs, ResumeBuilder, AI, Hacker, Movies, Extensions, Tools, ArrowUp };