improve header links and wrape footer to a memo

No0ne003 · May 22, 2024 · b0290de · b0290de
1 parent 21b828c
commit b0290de
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 81 deletions.
diff --git 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
diff --git a/src/assets/svg/github-mark.svg b/src/assets/svg/github-mark.svg
diff --git 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
@@ -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
@@ -1,28 +1,43 @@
 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">
       <div className="container flex justify-between items-center max-sm:p-0">
         <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
@@ -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">