diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 12ef62a..dc29d69 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -11,11 +11,13 @@ import Footer from "./Components/footer"; import ScrollRevealWrapper from "./Components/ui/ScrollRevealWrapper"; import Loader from "./Components/ui/Loader"; // ✅ Import the Loader + import Login from "./Components/auth/Login"; import Register from "./Components/auth/Register"; import Profile from "./Components/profile/Profile"; import ProtectedRoute from "./Components/auth/ProtectedRoute"; import Dashboard from "./Components/Dashboard"; +import PageWithBackButton from "./Components/layout/PageWithBackButton"; // Home component that contains the main landing page content @@ -114,18 +116,19 @@ function App() { return ( } /> - } /> - } /> - + } /> + } /> - - + + + + + } /> - } /> + } /> ); } diff --git a/frontend/src/Components/layout/PageWithBackButton.jsx b/frontend/src/Components/layout/PageWithBackButton.jsx new file mode 100644 index 0000000..6e3a48b --- /dev/null +++ b/frontend/src/Components/layout/PageWithBackButton.jsx @@ -0,0 +1,20 @@ +import React from "react"; +import { useLocation } from "react-router-dom"; +import BackButton from "../ui/BackButton"; + +/** + * Layout wrapper that adds a back button to all pages except home ("/"). + * Usage: + */ +export default function PageWithBackButton({ children }) { + const location = useLocation(); + // Hide back button on home page + const hideBack = location.pathname === "/"; + + return ( + <> + {!hideBack && } + {children} + + ); +} diff --git a/frontend/src/Components/profile/Profile.jsx b/frontend/src/Components/profile/Profile.jsx index a8af372..9c6222c 100644 --- a/frontend/src/Components/profile/Profile.jsx +++ b/frontend/src/Components/profile/Profile.jsx @@ -294,6 +294,7 @@ const Profile = () => { return (
+ {/* Back Button handled globally by layout */} {/* Navbar */} diff --git a/frontend/src/Components/ui/BackButton.jsx b/frontend/src/Components/ui/BackButton.jsx new file mode 100644 index 0000000..7e2dd6e --- /dev/null +++ b/frontend/src/Components/ui/BackButton.jsx @@ -0,0 +1,33 @@ +import { useNavigate } from 'react-router-dom'; +import { Button } from '../ui/button'; +import { ArrowLeft } from 'lucide-react'; + +/** + * Reusable BackButton component for navigation. + * Navigates to previous page or dashboard if no history. + * + * Usage: + */ +export default function BackButton({ to = '/dashboard', className = '' }) { + const navigate = useNavigate(); + + function handleBack() { + if (window.history.length > 2) { + navigate(-1); + } else { + navigate(to); + } + } + + return ( + + ); +}