From 62632e6de8d46fb0bed647127d6f4bea8af23b92 Mon Sep 17 00:00:00 2001
From: No0ne003 <hi.yassir.op@gmail.com>
Date: Wed, 15 May 2024 14:48:26 +0100
Subject: [PATCH] adding go back button to pages expect home page of course

---
 src/App.jsx                  |  8 ++++++--
 src/components/ui/GoBack.jsx | 22 ++++++++++++++++++++++
 src/layouts/header.jsx       |  2 +-
 3 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ui/GoBack.jsx

diff --git a/src/App.jsx b/src/App.jsx
index ddba91f..136a3cc 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,12 +1,14 @@
-import React, { lazy, Suspense, useState } from "react";
+import { lazy, Suspense, useState } from "react";
 import { ThemeProvider } from "@/components/theme-provider";
-import { Route, Routes } from "react-router-dom";
+import { Link, Route, Routes, useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 // layout
 import Header from "@/layouts/header";
 // components
 import Starfield from "react-starfield";
 import Cursor from "./components/Cursor";
 import Loading from "./components/ui/Loading";
+import GoBack from "./components/ui/GoBack";
 // Data
 import menus from "./pages/tree-view/data";
 
@@ -49,6 +51,7 @@ const ScrollToSection = lazy(() => import("./pages/ScrollToSection"));
 
 function App() {
   const [cursorVariant, setCursorVariant] = useState("default");
+  const location = useLocation();
 
   return (
     <ThemeProvider defaultTheme="dark" storageKey="ui-theme">
@@ -62,6 +65,7 @@ function App() {
       </div>
 
       <Header setCursorVariant={setCursorVariant} />
+      {location.pathname !== "/React-Projects/" && <GoBack />}
       <Suspense fallback={<Loading />}>
         <Routes>
           <Route path="React-Projects">
diff --git a/src/components/ui/GoBack.jsx b/src/components/ui/GoBack.jsx
new file mode 100644
index 0000000..543fea6
--- /dev/null
+++ b/src/components/ui/GoBack.jsx
@@ -0,0 +1,22 @@
+import { Button } from "@/components/ui/button";
+import { FaArrowLeft } from "react-icons/fa";
+import { Link } from "react-router-dom";
+
+const GoBack = () => {
+  return (
+    <Link
+      className={`flex items-center gap-1 fixed top-[20px] z-[0] left-0 px-2 xl:px-4`}
+      to={"React-Projects/"}
+    >
+      <FaArrowLeft className="fill-foreground text-[16px] xl:text-[14px] 2xl:text-[18px]" />
+      <Button
+        className="p-0 text-foreground hidden xl:block 2xl:text-[20px] font-light"
+        variant="link"
+      >
+        Back
+      </Button>
+    </Link>
+  );
+};
+
+export default GoBack;
diff --git a/src/layouts/header.jsx b/src/layouts/header.jsx
index cd97e7f..d87f3fc 100644
--- a/src/layouts/header.jsx
+++ b/src/layouts/header.jsx
@@ -17,7 +17,7 @@ const Header = memo(function Header({ setCursorVariant }) {
   const { theme } = useWhatTheme();
 
   return (
-    <header className="bg-background px-6 py-3 max-h-[60px] w-full">
+    <header className="bg-background px-6 py-3 max-h-[60px] w-full z-50">
       <div className="container flex justify-between items-center max-sm:p-0">
         <span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
           <Logo />