Added Button. Issue: RamakrushnaBiswal#66

I have added button according to UI
maitri-vv · Oct 5, 2024 · 69cebfd · 69cebfd
1 parent 57eb294
commit 69cebfd
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 5 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -19,7 +19,7 @@
     "gsap": "^3.12.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.2.1",
+    "react-icons": "^5.3.0",
     "react-intersection-observer": "^9.13.0",
     "react-pageflip": "^2.0.3",
     "react-router-dom": "^6.24.1",

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -16,4 +16,31 @@ body,
 
 body{
     background: #F1EADC;
-}
+}
+
+/* App.css */
+.back-to-top-btn {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    padding: 16px;
+    background-color: black;
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    animation: bounce 1s infinite;
+  }
+
+  @keyframes bounce {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,16 +1,58 @@
 // src/App.js
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import './App.css';
-import Navbar from '../src/components/Shared/Navbar';
-import Footer from "../src/components/Shared/Footer"
+import Navbar from './components/Shared/Navbar';
+import Footer from './components/Shared/Footer';
 import { Outlet } from 'react-router-dom';
+import { FaArrowUp } from 'react-icons/fa';  // For the arrow icon
 
 function App() {
+  const [showButton, setShowButton] = useState(false);
+
+  // Show the "Back to Top" button when the user scrolls down
+  useEffect(() => {
+    const handleScroll = () => {
+      const isBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 100;
+      setShowButton(isBottom);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
   return (
     <div>
       <Navbar />
       <Outlet />
       <Footer />
+
+      {/* "Back to Top" button, visible when scrolled to the bottom */}
+      {showButton && (
+        <button
+          onClick={scrollToTop}
+          className="fixed bottom-10 right-10 p-4 bg-black text-white rounded-full shadow-lg flex items-center justify-center animate-bounce"
+          style={{ animation: "bounce 1s infinite" }}
+        >
+          <FaArrowUp size={30} />
+        </button>
+      )}
+
+      {/* Keyframes for bounce animation */}
+      <style jsx>{`
+        @keyframes bounce {
+          0%, 100% {
+            transform: translateY(0);
+          }
+          50% {
+            transform: translateY(-10px);
+          }
+        }
+      `}</style>
     </div>
   );
 }

diff --git a/frontend/src/components/ui/FeedbackForm.jsx b/frontend/src/components/ui/FeedbackForm.jsx
@@ -73,6 +73,7 @@ const FeedbackForm = () => {
                   value={name}
                   onChange={(e) => setName(e.target.value)}
                   required
+                  autoComplete="off"
                   className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]"
                 />
               </div>
@@ -89,6 +90,7 @@ const FeedbackForm = () => {
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   required
+                  autoComplete="off"
                   className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]"
                 />
               </div>
@@ -105,6 +107,7 @@ const FeedbackForm = () => {
                   value={feedback}
                   onChange={(e) => setFeedback(e.target.value)}
                   required
+                  autoComplete="off"
                   className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]"
                 ></textarea>
               </div>