From f48b9568c192ec41d6345fb98e8320192c079ad3 Mon Sep 17 00:00:00 2001
From: Frank <frank.delaguila@gmail.com>
Date: Wed, 11 Oct 2023 22:57:46 -0600
Subject: [PATCH] Adding footer and menu API call for that, as well as adding
 some styling changes and additions

---
 src/components/common/Footer.tsx     | 40 ++++++++++++++++++++++++++++
 src/components/common/Internal.tsx   |  9 +++++--
 src/components/common/Navigation.tsx |  3 +--
 src/pages/[slug].tsx                 |  2 +-
 src/pages/index.tsx                  |  2 +-
 src/pages/portfolio/index.tsx        |  8 +++++-
 src/styles/globals.css               | 13 ++++++---
 7 files changed, 67 insertions(+), 10 deletions(-)
 create mode 100644 src/components/common/Footer.tsx

diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx
new file mode 100644
index 0000000..83d06db
--- /dev/null
+++ b/src/components/common/Footer.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { useGetMenuQuery } from "@/services/navigation";
+import Link from "next/link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLaptopCode } from "@fortawesome/free-solid-svg-icons";
+
+const Footer = (props: any): JSX.Element => {
+  const { data: menu, isSuccess, isLoading } = useGetMenuQuery("footer-menu");
+  return (
+    <nav className="items-center py-8 border-solid border-t border-red container flex flex-col md:flex-row justify-center md:justify-between">
+      <Link
+        href="/"
+        className="p-2 font-sans"
+      >
+        <div className="flex gap-2 md:gap-4 items-center">
+          <FontAwesomeIcon
+            icon={faLaptopCode}
+            size="lg"
+          />
+          <p className="font-bold font-sans text-2xl md:text-xl">
+            Frank Delaguila
+          </p>
+        </div>
+      </Link>
+      <div className="flex gap-8">
+        {menu?.items.map((link: any) => (
+          <Link
+            key={link.ID}
+            className="p-2"
+            href={`/${link.slug}`}
+          >
+            {link.title}
+          </Link>
+        ))}
+      </div>
+    </nav>
+  );
+};
+
+export default Footer;
diff --git a/src/components/common/Internal.tsx b/src/components/common/Internal.tsx
index 7316a72..ef35ac1 100644
--- a/src/components/common/Internal.tsx
+++ b/src/components/common/Internal.tsx
@@ -1,15 +1,20 @@
-import clsx from "clsx";
 import Navigation from "./Navigation";
+import Footer from "./Footer";
 
 interface InternalTypes {
   children?: React.ReactNode;
+  hideFooter?: boolean;
 }
 
-const Internal = ({ children }: InternalTypes): JSX.Element => {
+const Internal = ({
+  children,
+  hideFooter = false,
+}: InternalTypes): JSX.Element => {
   return (
     <main>
       <Navigation />
       {children ? children : null}
+      {!hideFooter ? <Footer /> : null}
     </main>
   );
 };
diff --git a/src/components/common/Navigation.tsx b/src/components/common/Navigation.tsx
index 9710c33..34fc9c8 100644
--- a/src/components/common/Navigation.tsx
+++ b/src/components/common/Navigation.tsx
@@ -69,8 +69,7 @@ const Navigation = (props: any): JSX.Element => {
         <>
           <Link
             href="/"
-            className="p-2"
-            style={{ fontFamily: "'Ubuntu', sans-serif" }}
+            className="p-2 font-sans"
           >
             <div className="flex gap-2 md:gap-4 items-center">
               <FontAwesomeIcon
diff --git a/src/pages/[slug].tsx b/src/pages/[slug].tsx
index 68438d7..6877574 100644
--- a/src/pages/[slug].tsx
+++ b/src/pages/[slug].tsx
@@ -36,7 +36,7 @@ const Page = ({ page }: any) => {
   console.log(page);
   return (
     <Internal>
-      <div className="container my-24 md:my-36 page-content">
+      <div className="my-24 md:my-36 w-3/4 mx-auto page-content">
         <h1 className="text-4xl md:text-[64px] text-primary md:mb-6 font-sans font-bold">
           {page.title.rendered}
         </h1>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4709687..85b1fc3 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,7 +5,7 @@ import Internal from "@/components/common/Internal";
 
 export default function Home(): JSX.Element {
   return (
-    <Internal>
+    <Internal hideFooter>
       <div className="absolute h-screen w-full top-0 left-0 scene">
         <Canvas
           shadows
diff --git a/src/pages/portfolio/index.tsx b/src/pages/portfolio/index.tsx
index 62095fc..93aa9c0 100644
--- a/src/pages/portfolio/index.tsx
+++ b/src/pages/portfolio/index.tsx
@@ -61,7 +61,13 @@ export default function Portfolio({ projects }: any): JSX.Element {
   }, [carouselChange]);
   return (
     <Internal>
-      <div className="container mt-32 mb-12">
+      <div className="container mt-28 md:mt-32 mb-8 md:mb-16">
+        <h1 className="text-4xl md:text-[64px] mb-4 font-sans font-bold">
+          Portfolio
+        </h1>
+        <p>Here's all my latest projects, and the technologies used!</p>
+      </div>
+      <div className="container mb-12">
         {/*
           // @ts-ignore */}
         <Slider
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 6d1657f..0fa43fb 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -64,11 +64,18 @@
   .post-content h2.wp-block-heading {
     @apply text-4xl font-bold mb-4 text-primary;
   }
-  .post-content h3.wp-block-heading {
+  .post-content h3.wp-block-heading,
+  .page-content h3 {
     @apply text-2xl font-bold mb-4;
   }
-  .post-content img, video {
-    @apply block w-full mb-10;
+  .post-content img, video,
+  .page-content img, video {
+    @apply block w-full my-10;
+  }
+
+  .post-content img,
+  .page-content img {
+    @apply rounded-lg;
   }
   /* END Post Content */