Done changes

I hv done the changes and only used Tailwind CSS RamakrushnaBiswal#66
maitri-vv · Oct 8, 2024 · 8b68c29 · 8b68c29
1 parent e857ce6
commit 8b68c29
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 26 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -16,4 +16,15 @@ body,
 
 body{
     background: #F1EADC;
-}
+}
+
+
+  @keyframes bounce {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -2,10 +2,10 @@
 
 import './App.css';
 import Navbar from '../src/components/Shared/Navbar';
-import Footer from "../src/components/Shared/Footer"
+import Footer from "../src/components/Shared/Footer";
 import { Outlet } from 'react-router-dom';
-
-import {KindeProvider} from "@kinde-oss/kinde-auth-react";
+import React, { useState, useEffect } from 'react';
+import { KindeProvider } from "@kinde-oss/kinde-auth-react";
 
 function App() {
   const [showButton, setShowButton] = useState(false);
@@ -28,18 +28,24 @@ function App() {
 
   return (
     <KindeProvider
-    clientId={import.meta.env.VITE_KINDE_CLIENT_ID}
-    domain={import.meta.env.VITE_KINDE_DOMAIN}
-    redirectUri={import.meta.env.VITE_KINDE_REDIRECT_URI}
-    logoutUri={import.meta.env.VITE_KINDE_LOGOUT_REDIRECT_URI}
-  >
-    <Navbar />
-    <Outlet />
-    <Footer />
-  </KindeProvider>
-
-
+      clientId={import.meta.env.VITE_KINDE_CLIENT_ID}
+      domain={import.meta.env.VITE_KINDE_DOMAIN}
+      redirectUri={import.meta.env.VITE_KINDE_REDIRECT_URI}
+      logoutUri={import.meta.env.VITE_KINDE_LOGOUT_REDIRECT_URI}
+    >
+      <Navbar />
+      <Outlet />
+      <Footer />
+
+      {showButton && (
+        <button
+          onClick={scrollToTop}
+          className="fixed bottom-8 right-8 bg-[#E0F0B1] hover:bg-amber-300 text-white font-bold py-2 px-4 rounded-full shadow-lg transition-transform duration-300 transform hover:scale-110"        >
+          ↑ 
+        </button>
+      )}
+    </KindeProvider>
   );
 }
 
-export default App;
+export default App;
diff --git a/frontend/src/components/Shared/Navbar.jsx b/frontend/src/components/Shared/Navbar.jsx
@@ -11,7 +11,9 @@ const Navbar = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const location = useLocation();
   const wasAuthenticated = useRef(null);
-  const { setEmail } = useAuth();
+
+  // Get setEmail from useAuth, or fallback to an empty object if useAuth is undefined
+  const { setEmail } = useAuth() || {};
 
   const menuItems = [
     { name: "Home", path: "/" },
@@ -44,7 +46,6 @@ const Navbar = () => {
     }
     if (!wasAuthenticated.current && isAuthenticated) {
       message.success("Login successful!");
-      // Fetch user details only when authentication is successful
       fetchUserDetails();
     }
     wasAuthenticated.current = isAuthenticated;
@@ -53,8 +54,8 @@ const Navbar = () => {
   const fetchUserDetails = async () => {
     try {
       const user = getUser();
-      if (user) {
-        setEmail(user.email); // Store email in the context
+      if (user && setEmail) {
+        setEmail(user.email); // Only call setEmail if it's defined
         console.log("User email:", user.email);
       }
     } catch (error) {
@@ -92,7 +93,7 @@ const Navbar = () => {
   const handleLogout = async () => {
     try {
       await logout();
-      setEmail(null);
+      if (setEmail) setEmail(null);
     } catch (error) {
       message.error("Logout failed. Please try again.");
     }
@@ -127,7 +128,6 @@ const Navbar = () => {
               ))}
               {isAuthenticated ? (
                 <button
-
                   onClick={handleLogout}
                   className={`${baseTextColorClass} ${hoverTextColorClass} transform hover:scale-110 hover:-translate-y-1 transition `}
                   type="button"
@@ -184,7 +184,7 @@ const Navbar = () => {
                 key={item.name}
                 to={item.path}
                 className={`block px-4 py-3 rounded-md text-base font-semibold transition duration-300 
-                          ${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
+                       ${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
               >
                 {item.name}
               </Link>
@@ -193,15 +193,15 @@ const Navbar = () => {
               <button
                 onClick={handleLogout}
                 className={`block w-full text-left px-4 py-3 rounded-md text-base font-semibold transition duration-300 
-                          ${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
+                       ${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
               >
                 Log Out
               </button>
             ) : (
               <button
                 onClick={handleLogin}
                 className={`block w-full text-left px-4 py-3 rounded-md text-base font-semibold transition duration-300 
-                            ${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
+                         ${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
               >
                 Log In
               </button>
@@ -213,4 +213,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;