From a7eb19359865cb1a101793eecbf216a5cf43a5c8 Mon Sep 17 00:00:00 2001 From: Mastan Sayyad Date: Sun, 7 Jul 2024 01:23:05 +0530 Subject: [PATCH 1/4] Create BottomToTop.jsx --- src/components/BottomToTop.jsx | 93 +++++++++++++++++++--------------- 1 file changed, 51 insertions(+), 42 deletions(-) diff --git a/src/components/BottomToTop.jsx b/src/components/BottomToTop.jsx index 10fb1e5..fd5c0d8 100644 --- a/src/components/BottomToTop.jsx +++ b/src/components/BottomToTop.jsx @@ -1,49 +1,58 @@ -import React from 'react' -import "./BottomToTop.css" -import { - useState, - useEffect -} from 'react'; -import { animateScroll as scroll } from 'react-scroll'; +import React, { useState, useEffect } from "react"; +import styled from "styled-components"; +import { FaArrowUp } from "react-icons/fa"; -const BackToTop = () => { - const [isVisible, setIsVisible] = useState(false); +const GoToTop = () => { + const [isVisible, setIsVisible] = useState(false); + useEffect(() => { const handleScroll = () => { - if (window.scrollY > 100) { - setIsVisible(true); - } else { - setIsVisible(false); - } + const currentScrollY = window.scrollY; + setIsVisible(currentScrollY > 200); // Change 200 to your desired scroll distance }; - useEffect(() => { - window.addEventListener('scroll', handleScroll); - return () => { - window.removeEventListener('scroll', handleScroll); - }; - }, []); - - const backToTop = () => { - // window.scrollTo({ - // top: 0, - // behavior: 'smooth', - // }); - scroll.scrollToTop({ - duration: 500, - smooth: "easeInOutQuad", - }); + window.addEventListener("scroll", handleScroll); + + return () => { + window.removeEventListener("scroll", handleScroll); }; + }, []); + + const goToTop = () => { + window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); + }; + + return ( + <> + {isVisible && ( + + + + )} + + ); +}; + +const Wrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + position: fixed; + bottom: 17px; + right: 10px; + color: white; + background-color: rgb(59 130 246); + width: 48px; + height: 48px; + z-index: 9999; + border-radius: 50%; + cursor: pointer; + transition: transform 0.3s ease, background-color 0.3s ease; + + &:hover { + background-color: #003a79; + transform: translateY(-5px); + } +`; - return (< - div className={ - `scroll-to-top-button ${isVisible ? 'visible' : ''}` - } - onClick={ - backToTop - } > - - ) -} - -export default BackToTop \ No newline at end of file +export default GoToTop; From 006698aeeabecb84d473effd8ea8c055d02fbacf Mon Sep 17 00:00:00 2001 From: Mastan Sayyad Date: Sun, 7 Jul 2024 01:23:20 +0530 Subject: [PATCH 2/4] Delete BottomToTop.css --- src/components/BottomToTop.css | 33 --------------------------------- 1 file changed, 33 deletions(-) delete mode 100644 src/components/BottomToTop.css diff --git a/src/components/BottomToTop.css b/src/components/BottomToTop.css deleted file mode 100644 index 0739efe..0000000 --- a/src/components/BottomToTop.css +++ /dev/null @@ -1,33 +0,0 @@ -.scroll-to-top-button { - display: none; - position: fixed; - bottom: 20px; - right: 20px; - background-color: #007bff; - color: #fff; - border: none; - border-radius: 50%; - width: 50px; - height: 50px; - font-size: 24px; - cursor: pointer; - z-index: 99; - transition: opacity 0.3s, visibility 0.3s; -} - -.scroll-to-top-button.visible { - display: block; -} - -.scroll-to-top-button i { - line-height: 50px; - display: flex; - align-items: center; - justify-content: center; - z-index: 99; - -} - -.scroll-to-top-button:hover { - background-color: #0056b3; -} \ No newline at end of file From 83fda95a9410e8b58f7333057e8698aebd1f12bf Mon Sep 17 00:00:00 2001 From: Mastan Sayyad Date: Sun, 7 Jul 2024 01:23:39 +0530 Subject: [PATCH 3/4] Update App.jsx --- src/App.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.jsx b/src/App.jsx index 1eba9fc..5a81f61 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,6 +6,7 @@ import DemoSection from './components/DemoSection'; import ContactUs from './components/ContactUs'; import Models from './components/Models'; import Preloader from './components/Preloader'; +import GoToTop from './components/BottomToTop'; const App = () => { const [loading, setLoading] = useState(true); @@ -22,6 +23,7 @@ const App = () => { <> +
From defb22fa6e324de21175c26c0376ca94144e8c05 Mon Sep 17 00:00:00 2001 From: Mastan Sayyad Date: Sun, 7 Jul 2024 01:23:51 +0530 Subject: [PATCH 4/4] Update --- package-lock.json | 92 ++++++++++++++++++++++++++++++++++++++++++----- package.json | 1 + 2 files changed, 85 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7e9cd2f..b1d6b59 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,7 @@ "react-tsparticles": "^2.12.2", "react-use": "^17.5.0", "slick-carousel": "^1.8.1", + "styled-components": "^6.1.11", "three": "^0.163.0", "tsparticles": "^3.3.0", "typescript": "^5.4.5" @@ -441,6 +442,24 @@ "node": ">=14.0.0" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz", @@ -3181,6 +3200,11 @@ "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz", "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==" }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==" + }, "node_modules/@types/three": { "version": "0.165.0", "resolved": "https://registry.npmjs.org/@types/three/-/three-0.165.0.tgz", @@ -3722,6 +3746,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/camera-controls": { "version": "2.8.3", "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-2.8.3.tgz", @@ -3918,6 +3950,14 @@ "node": ">= 8" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-in-js-utils": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz", @@ -3926,6 +3966,16 @@ "hyphenate-style-name": "^1.0.3" } }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", @@ -6094,7 +6144,6 @@ "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", - "dev": true, "funding": [ { "type": "github", @@ -6385,8 +6434,7 @@ "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", - "dev": true + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" }, "node_modules/picomatch": { "version": "2.3.1", @@ -6431,7 +6479,6 @@ "version": "8.4.38", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", - "dev": true, "funding": [ { "type": "opencollective", @@ -6590,8 +6637,7 @@ "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "dev": true + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, "node_modules/potpack": { "version": "1.0.2", @@ -6772,7 +6818,6 @@ "version": "5.2.1", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz", "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==", - "license": "MIT", "peerDependencies": { "react": "*" } @@ -7291,6 +7336,11 @@ "node": ">=6.9" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -7360,7 +7410,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -7628,6 +7677,33 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/styled-components": { + "version": "6.1.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.11.tgz", + "integrity": "sha512-Ui0jXPzbp1phYij90h12ksljKGqF8ncGx+pjrNPsSPhbUUjWT2tD1FwGo2LF6USCnbrsIhNngDfodhxbegfEOA==", + "dependencies": { + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, "node_modules/stylis": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", diff --git a/package.json b/package.json index 5d80355..4589335 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "react-tsparticles": "^2.12.2", "react-use": "^17.5.0", "slick-carousel": "^1.8.1", + "styled-components": "^6.1.11", "three": "^0.163.0", "tsparticles": "^3.3.0", "typescript": "^5.4.5"