From b0290def43155e6e266497556d338051304c850b Mon Sep 17 00:00:00 2001
From: No0ne003 <hi.yassir.op@gmail.com>
Date: Wed, 22 May 2024 13:20:35 +0100
Subject: [PATCH] improve header links and wrape footer to a memo

---
 src/App.jsx                          |  3 +-
 src/assets/svg/github-mark-white.svg |  1 -
 src/assets/svg/github-mark.svg       |  1 -
 src/components/ui/NavLinks.jsx       | 38 +++++++--------
 src/layouts/Footer.jsx               | 49 ++++++++++----------
 src/layouts/header.jsx               | 69 +++++++++++++---------------
 src/pages/Home/Home.jsx              |  2 +-
 7 files changed, 82 insertions(+), 81 deletions(-)
 delete mode 100644 src/assets/svg/github-mark-white.svg
 delete mode 100644 src/assets/svg/github-mark.svg

diff --git a/src/App.jsx b/src/App.jsx
index ddf9d60..f21c2fd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -136,8 +136,9 @@ function App() {
             <Route path="*" element={<NotFound />} />
           </Route>
         </Routes>
+
+        <Footer setCursorVariant={setCursorVariant} />
       </Suspense>
-      <Footer setCursorVariant={setCursorVariant} />
     </ThemeProvider>
   );
 }
diff --git a/src/assets/svg/github-mark-white.svg b/src/assets/svg/github-mark-white.svg
deleted file mode 100644
index d5e6491..0000000
--- a/src/assets/svg/github-mark-white.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/src/assets/svg/github-mark.svg b/src/assets/svg/github-mark.svg
deleted file mode 100644
index 37fa923..0000000
--- a/src/assets/svg/github-mark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>
\ No newline at end of file
diff --git a/src/components/ui/NavLinks.jsx b/src/components/ui/NavLinks.jsx
index a99f5ce..1304f97 100644
--- a/src/components/ui/NavLinks.jsx
+++ b/src/components/ui/NavLinks.jsx
@@ -1,22 +1,24 @@
-import { Button } from "@/components/ui/button"
-import PropTypes from 'prop-types';
+import { Button } from "@/components/ui/button";
+import { Link } from "react-router-dom";
 
-function NavLinks(props) {
+function NavLinks({ setCursorVariant, link, icon, name }) {
+  const handleMouseEnter = () => setCursorVariant("text");
+  const handleMouseLeave = () => setCursorVariant("default");
 
-  return(
-    <a target="_blank" href={props.link} rel="noopener" tabIndex="-1">
-      <Button variant="ghost"  size='icon'>
-        <img className="size-4" src={props.logo} alt={props.name} />
-        <span className="sr-only">{props.name}</span>
-      </Button>
-    </a>
-  )
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      asChild
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <Link to={link} rel="noopener" tabIndex="-1" target="_blank">
+        {icon}
+        <span className="sr-only">{name}</span>
+      </Link>
+    </Button>
+  );
 }
 
-NavLinks.propTypes = {
-  link: PropTypes.string.isRequired,
-  logo: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired
-}
-
-export default NavLinks
+export default NavLinks;
diff --git a/src/layouts/Footer.jsx b/src/layouts/Footer.jsx
index b1b50a4..cf4dcc6 100644
--- a/src/layouts/Footer.jsx
+++ b/src/layouts/Footer.jsx
@@ -1,4 +1,5 @@
 import { Button } from "@/components/ui/button";
+import { memo } from "react";
 import { FaGithub, FaInstagram, FaTwitter } from "react-icons/fa";
 import { Link } from "react-router-dom";
 
@@ -8,31 +9,33 @@ const socialLinks = [
   { link: "https://x.com/No0ne003", icon: <FaTwitter /> },
 ];
 
-const Footer = ({ setCursorVariant }) => (
-  <footer className="flex flex-col items-center justify-center bg-secondary/40 py-5 text-sm">
-    <div className="relative z-10 overflow-hidden">
-      <div className="flex flex-col items-center gap-3 text-center">
-        <p className="max-w-md">Awesome React js Projects</p>
-        <div className="flex justify-center w-full gap-1">
-          <p>Made with &lt;3 by No0ne</p>
-          <p className="text-foreground/85 text-sm leading-5">
-            | &copy; {new Date().getFullYear()} No0ne003.
-          </p>
-        </div>
-        <div className="flex items-center gap-3 mt-2">
-          {socialLinks.map(({ link, icon }) => (
-            <FooterLink
-              key={link}
-              setCursorVariant={setCursorVariant}
-              link={link}
-              icon={icon}
-            />
-          ))}
+const Footer = memo(function Footer({ setCursorVariant }) {
+  return (
+    <footer className="flex flex-col items-center justify-center bg-secondary/40 py-5 text-sm mt-20">
+      <div className="container relative z-10">
+        <div className="flex flex-col items-center gap-3 text-center">
+          <p className="max-w-md">Awesome React js Projects</p>
+          <div className="flex justify-center w-full gap-1">
+            <p>Made with &lt;3 by No0ne</p>
+            <p className="text-foreground/85 text-sm leading-5">
+              | &copy; {new Date().getFullYear()} No0ne003.
+            </p>
+          </div>
+          <div className="flex items-center gap-3 mt-2">
+            {socialLinks.map(({ link, icon }) => (
+              <FooterLink
+                key={link}
+                setCursorVariant={setCursorVariant}
+                link={link}
+                icon={icon}
+              />
+            ))}
+          </div>
         </div>
       </div>
-    </div>
-  </footer>
-);
+    </footer>
+  );
+});
 
 const FooterLink = ({ setCursorVariant, link, icon }) => {
   const handleMouseEnter = () => setCursorVariant("text");
diff --git a/src/layouts/header.jsx b/src/layouts/header.jsx
index d87f3fc..cfa5856 100644
--- a/src/layouts/header.jsx
+++ b/src/layouts/header.jsx
@@ -1,20 +1,35 @@
 import { memo } from "react";
 // Assets
-import githubLogoDark from "@/assets/svg/github-mark-white.svg";
-import githubLogoLight from "@/assets/svg/github-mark.svg";
 import palestineSvg from "@/assets/svg/Flag_of_Palestine.svg";
+import { FaGithub, FaInstagram, FaTwitter } from "react-icons/fa";
 
 // Components
 import { Link } from "react-router-dom";
 import { ModeToggle } from "@/components/mode-toggle";
 import NavLinks from "@/components/ui/NavLinks";
 import { Button } from "@/components/ui/button";
-import useWhatTheme from "@/lib/utils";
+
+const socialLinks = [
+  {
+    link: "https://github.com/No0ne003/React-Projects",
+    icon: <FaGithub size={15} />,
+    name: "Github",
+  },
+  {
+    link: "https://instagram.com/No0ne.003",
+    icon: <FaInstagram size={15} />,
+    name: "instagram",
+  },
+  {
+    link: "https://x.com/No0ne003",
+    icon: <FaTwitter size={15} />,
+    name: "twitter",
+  },
+];
 
 const Header = memo(function Header({ setCursorVariant }) {
   const handleMouseEnter = () => setCursorVariant("text");
   const handleMouseLeave = () => setCursorVariant("default");
-  const { theme } = useWhatTheme();
 
   return (
     <header className="bg-background px-6 py-3 max-h-[60px] w-full z-50">
@@ -22,7 +37,7 @@ const Header = memo(function Header({ setCursorVariant }) {
         <span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
           <Logo />
         </span>
-        <Navigation setCursorVariant={setCursorVariant} theme={theme} />
+        <Navigation setCursorVariant={setCursorVariant} />
       </div>
     </header>
   );
@@ -41,41 +56,23 @@ function Logo() {
   );
 }
 
-const Navigation = ({ setCursorVariant, theme }) => {
-  const handleMouseEnter = () => setCursorVariant("text");
-  const handleMouseLeave = () => setCursorVariant("default");
-
+const Navigation = ({ setCursorVariant }) => {
   return (
-    <nav className="flex items-center gap-2 sm:gap-6">
-      <span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-        <DonateToPalestine />
-      </span>
-      <span onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-        <NavLinks
-          logo={theme === "dark" ? githubLogoDark : githubLogoLight}
-          name="Github"
-          link="https://github.com/No0ne003/React-Project"
-        />
-      </span>
+    <nav className="flex items-center space-x-6">
+      <div className="flex items-center gap-3">
+        {socialLinks.map((social, index) => (
+          <NavLinks
+            key={index}
+            link={social.link}
+            icon={social.icon}
+            name={social.name}
+            setCursorVariant={setCursorVariant}
+          />
+        ))}
+      </div>
       <ModeToggle />
     </nav>
   );
 };
 
-function DonateToPalestine() {
-  return (
-    <Button variant="outline" asChild>
-      <a
-        className="sm:space-x-2 sm:flex sm:items-center"
-        href="https://donate.unrwa.org/gaza/~my-donation?_cv=1"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <img className="size-4" src={palestineSvg} alt="Palestine" />
-        <span className="hidden sm:block">Donate Now</span>
-      </a>
-    </Button>
-  );
-}
-
 export default Header;
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
index bde14a3..0cd6504 100644
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -46,7 +46,7 @@ function Home({ setCursorVariant }) {
   };
 
   return (
-    <main className="flex flex-col mb-32">
+    <main className="flex flex-col">
       <div className="landing relative mb-24 py-12 sm:py-16 lg:pt-20 xl:pb-0">
         <div className="relative mx-auto px-4 sm:px-6 lg:px-8 flex flex-col justify-end max-sm:h-[75vh]">
           <div className="mx-auto max-w-3xl text-center">