Made a piece of state to handle going back to mainpage in thr header …

…component.
Will513r · Aug 3, 2024 · a43a6c0 · a43a6c0
1 parent 69deb8e
commit a43a6c0
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.2.2",
+    "uuidv4": "^6.2.13",
     "vite": "^5.3.1"
   }
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,40 +1,41 @@
-export function Header() {
+import { useState } from "react";
+
+type HeaderProps = {
+  navigation: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export function Header({}: HeaderProps) {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  function navigationToggle() {
+    setIsOpen(!isOpen);
+  }
+
   return (
     <header className="bg-black">
       <div className="container mx-auto flex items-center justify-between px-10 py-6">
         <div>
-          <h1 className="bg-gradient-to-tr from-indigo-600 to-green-600 bg-clip-text text-4xl font-bold text-transparent hover:cursor-pointer">
+          <a
+            onClick={navigationToggle}
+            href="/Mainpage"
+            className="bg-gradient-to-tr from-indigo-600 to-green-600 bg-clip-text text-4xl font-bold text-transparent hover:cursor-pointer"
+          >
             React Blog
-          </h1>
+          </a>
         </div>
         <nav className="flex items-center">
           <ul className="hidden items-center space-x-4 sm:flex">
             <li>
-              <a
-                href="#"
-                className="text-md from-indigo-600 to-green-600 hover:text-indigo-600"
-              >
-                Home
-              </a>
-            </li>
-            <li>
-              <a
-                href="#"
-                className="text-md from-indigo-600 to-green-600 hover:text-indigo-600"
-              >
-                About
-              </a>
-            </li>
-            <li>
-              <a
-                href="#"
-                className="text-md from-indigo-600 to-green-600 hover:text-indigo-600"
-              >
-                Posts
+              <a href="/Mainpage">
+                <button
+                  onClick={navigationToggle}
+                  className="text-md from-indigo-600 to-green-600 hover:text-indigo-600"
+                >
+                  Home
+                </button>
               </a>
             </li>
           </ul>
-
           <div className="ml-8 hidden items-center space-x-4 md:flex lg:ml-12"></div>
         </nav>
       </div>