Merge pull request #8 from steik-ITB-23/feat/ComponentFooter/MIKE

feat: Footer
steik-ITB-23 · Apr 10, 2024 · fe78d18 · fe78d18
2 parents e9cadbd + 7ce8054
commit fe78d18
Show file tree

Hide file tree

Showing 7 changed files with 212 additions and 44 deletions.
diff --git a/src/components/BPACard.tsx b/src/components/BPACard.tsx
@@ -11,7 +11,10 @@ const BPACard = ({ imgUrl, name, position, hideName }: memberBPA) => {
   return (
     <div className="w-[38%] sm:w-[18%] min-w-[200px] max-w-[200px] h-auto text-center drop-shadow-xl border-4 rounded-xl flex flex-col bg-slate-50 border-slate-50 hover:scale-110 duration-150 ease-in hover:shadow-lg hover:font-semibold flex-grow-0 aspect-[3/4]">
       <Image
-        src={imgUrl || "https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"}
+        src={
+          imgUrl ||
+          "https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"
+        }
         alt={name}
         width={300}
         height={700}
@@ -21,7 +24,9 @@ const BPACard = ({ imgUrl, name, position, hideName }: memberBPA) => {
       {!hideName && (
         <div className="flex justify-center items-center flex-grow">
           <p className="border-t-2 border-slate-300 px-2 py-3">{name}</p>
-          {position && <p className="border-t-2 border-slate-300 px-2 py-3">{position}</p>}
+          {position && (
+            <p className="border-t-2 border-slate-300 px-2 py-3">{position}</p>
+          )}
         </div>
       )}
     </div>

diff --git a/src/components/BPAbutton.tsx b/src/components/BPAbutton.tsx
@@ -7,10 +7,15 @@ const BPAbutton = ({ data }: { data: bpaType }) => {
   return (
     <Link
       href={`/tentang-bpa/#${getSlug(data.name)}`}
-      className="border-2 rounded-full border-[#101351] md:border-slate-200 h-fit px-2 py-0.5 hover:bg-slate-50/50 ease-in duration-75">
+      className="border-2 rounded-full border-[#101351] md:border-slate-200 h-fit px-2 py-0.5 hover:bg-slate-50/50 ease-in duration-75"
+    >
       <p className="button">
         <span className="text-[#101351] md:text-white">{data.name}</span>{" "}
-        {data.members.length > 1 && <span className="font-bold text-[#79B5EE]">{data.members.length}</span>}
+        {data.members.length > 1 && (
+          <span className="font-bold text-[#79B5EE]">
+            {data.members.length}
+          </span>
+        )}
       </p>
     </Link>
   );

diff --git a/src/components/BPAinfo.tsx b/src/components/BPAinfo.tsx
@@ -26,28 +26,46 @@ const BPAInfo = ({ data }: { data: bpaType }) => {
   };
 
   return (
-    <div className="w-full pb-8 py-2" id={getSlug(data.name)} data-aos="fade-right">
+    <div
+      className="w-full pb-8 py-2"
+      id={getSlug(data.name)}
+      data-aos="fade-right"
+    >
       <div className="flex w-full border-b-2 gap-2 items-center">
         <h2 className="font-bold text-xl">{data.name}</h2>
-        <span className="text-xl font-bold text-blue-600 cursor-pointer hover:text-blue-500" onClick={handleCopyLink}>
+        <span
+          className="text-xl font-bold text-blue-600 cursor-pointer hover:text-blue-500"
+          onClick={handleCopyLink}
+        >
           #
         </span>
-        {copySuccess && <span className="text-blue-500 ml-2 text-sm">Copied!</span>}
+        {copySuccess && (
+          <span className="text-blue-500 ml-2 text-sm">Copied!</span>
+        )}
       </div>
       {data.members.length > 1 ? (
         <>
           <p className="py-2 font-light">{data.jobDesc}</p>
           <div className="flex gap-4 flex-wrap w-full justify-center sm:justify-start">
             {data.members.map((member, idx) => (
-              <BPACard key={`${idx}-${member}-${data.name}`} name={member.name} imgUrl={member.imgUrl} />
+              <BPACard
+                key={`${idx}-${member}-${data.name}`}
+                name={member.name}
+                imgUrl={member.imgUrl}
+              />
             ))}
           </div>
         </>
       ) : (
         <div className="flex flex-col lg:flex-row gap-2 w-full py-4">
           <div className="flex gap-4 flex-wrap w-full sm:w-fit flex-grow-0 justify-center sm:justify-start">
             {data.members.map((member, idx) => (
-              <BPACard key={`${idx}-${member}-${data.name}`} name={member.name} imgUrl={member.imgUrl} hideName={true} />
+              <BPACard
+                key={`${idx}-${member}-${data.name}`}
+                name={member.name}
+                imgUrl={member.imgUrl}
+                hideName={true}
+              />
             ))}
           </div>
           <p className="py-2 font-light">

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,57 @@
+import Link from "next/link";
+import React from "react";
+import { IoIosStarOutline } from "react-icons/io";
+import { FaInstagram } from "react-icons/fa";
+import { FaYoutube } from "react-icons/fa6";
+import { FaTiktok } from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
+import { SiLinktree } from "react-icons/si";
+
+const Footer = () => {
+  return (
+    <footer className="w-full h-fit px-4 md:px-8 bg-[#151655] text-white">
+      <div className="w-full h-full grow-0 flex flex-col mx-auto py-2">
+        <div className="border-b-2 border-white flex flex-col md:flex-row justify-between py-2">
+          <div className="flex gap-2 items-center">
+            <div className="w-10 h-10 bg-white rounded-full" />
+            <div className="flex flex-col justify-center">
+              <p>Syntax</p>
+              <p>Code Create Connect</p>
+            </div>
+          </div>
+          <div className="flex gap-1 md:gap-12 pl-2 py-4 md:py-0 flex-col md:flex-row items-start md:items-center">
+            <Link href="/">About Us</Link>
+            <Link href="/">Support Us</Link>
+            <Link href="/">Contact Us</Link>
+            <Link href="/">Media Kit</Link>
+          </div>
+          <div className="flex flex-col justify-center pb-2 md:pb-0 items-start md:items-end">
+            <p>Like What You&apos;re Seeing?</p>
+            <p>Give us feedback!</p>
+            <div className="flex">
+              <IoIosStarOutline />
+              <IoIosStarOutline />
+              <IoIosStarOutline />
+              <IoIosStarOutline />
+              <IoIosStarOutline />
+            </div>
+          </div>
+        </div>
+        <div className="w-full flex justify-between gap-4">
+          <div className="py-2">
+            <p>&copy; 2024 BPA Academics STEI-K 2023. All rights reserved.</p>
+          </div>
+          <div className="py-2 gap-4 flex flex-row items-center">
+            <FaInstagram />
+            <FaYoutube />
+            <FaTiktok />
+            <FaXTwitter />
+            <SiLinktree />
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -8,13 +8,26 @@ import { GoHome, GoCopilot } from "react-icons/go";
 import { IoMdBook } from "react-icons/io";
 import { RiGroupLine } from "react-icons/ri";
 
-const NavListDesktop = ({ href, routerPathname, lable }: { href: string; routerPathname: string; lable: string }) => (
+const NavListDesktop = ({
+  href,
+  routerPathname,
+  lable,
+}: {
+  href: string;
+  routerPathname: string;
+  lable: string;
+}) => (
   <Link href={href} className="hidden md:block h-full">
     <p
       className={
-        routerPathname === href ? "border-b-2 border-gray-400" : "hover:brightness-110 hover:border-b-2 border-gray-400"
-      }>
-      <span className="text-[16px] lg:text-[18px] font-outfit tracking-wider">{lable}</span>
+        routerPathname === href
+          ? "border-b-2 border-gray-400"
+          : "hover:brightness-110 hover:border-b-2 border-gray-400"
+      }
+    >
+      <span className="text-[16px] lg:text-[18px] font-outfit tracking-wider">
+        {lable}
+      </span>
     </p>
   </Link>
 );
@@ -68,12 +81,20 @@ const Navbar = () => {
     <>
       <header
         className={`sticky left-0 top-0 z-50 h-[5.2rem] flex w-full items-center px-0 duration-500 ease-in-out ${scrollDirection ? "translate-y-0" : "-translate-y-24"} ${
-          router.pathname === "/" && !scrolledOneThirdvw ? "bg-none" : "bg-[#101351]"
-        }`}>
+          router.pathname === "/" && !scrolledOneThirdvw
+            ? "bg-none"
+            : "bg-[#101351]"
+        }`}
+      >
         <div className="w-full px-2 mx-auto">
           <div className="relative flex items-center justify-between">
-            <Link href="/" className="w-fit h-[5rem] flex items-center gap-4 pl-4">
-              <div className={`h-4 min-h-full py-2 transition-all duration-300`}>
+            <Link
+              href="/"
+              className="w-fit h-[5rem] flex items-center gap-4 pl-4"
+            >
+              <div
+                className={`h-4 min-h-full py-2 transition-all duration-300`}
+              >
                 <Image
                   src="https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"
                   className={`w-full h-full cursor-pointer object-contain`}
@@ -86,11 +107,13 @@ const Navbar = () => {
               </div>
               <div className="flex flex-col justify-center gap-0 pt-1">
                 <h1
-                  className={`font-extrabold uppercase text-2xl duration-100 ease-in tracking-wider font-outfit h-fit leading-4 ${getTextColor()}`}>
+                  className={`font-extrabold uppercase text-2xl duration-100 ease-in tracking-wider font-outfit h-fit leading-4 ${getTextColor()}`}
+                >
                   Syntax
                 </h1>
                 <p
-                  className={`text-[16px] lg:text-lg duration-100 ease-in tracking-wider font-outfit leading-6 ${getTextColor()}`}>
+                  className={`text-[16px] lg:text-lg duration-100 ease-in tracking-wider font-outfit leading-6 ${getTextColor()}`}
+                >
                   code, create, connect
                 </p>
               </div>
@@ -100,11 +123,28 @@ const Navbar = () => {
             <div className="flex gap-2 sm:gap-4 md:gap-6 lg:gap-10 items-center">
               {/* Desktop navigation list */}
               <div
-                className={`flex gap-0 py-1 text-[#6B778C] md:gap-6 lg:gap-8 lg:py-5 xl:gap-12 uppercase items-center ${getTextColor()}`}>
-                <NavListDesktop href="/" routerPathname={router.pathname} lable="Home" />
-                <NavListDesktop href="/tentang-bpa" routerPathname={router.pathname} lable="BPA" />
-                <NavListDesktop href="/akademik" routerPathname={router.pathname} lable="Akademik" />
-                <NavListDesktop href="/acara-kemahasiswaan" routerPathname={router.pathname} lable="Acara" />
+                className={`flex gap-0 py-1 text-[#6B778C] md:gap-6 lg:gap-8 lg:py-5 xl:gap-12 uppercase items-center ${getTextColor()}`}
+              >
+                <NavListDesktop
+                  href="/"
+                  routerPathname={router.pathname}
+                  lable="Home"
+                />
+                <NavListDesktop
+                  href="/tentang-bpa"
+                  routerPathname={router.pathname}
+                  lable="BPA"
+                />
+                <NavListDesktop
+                  href="/akademik"
+                  routerPathname={router.pathname}
+                  lable="Akademik"
+                />
+                <NavListDesktop
+                  href="/acara-kemahasiswaan"
+                  routerPathname={router.pathname}
+                  lable="Acara"
+                />
               </div>
 
               {/* Mobile Nav Button */}
@@ -113,39 +153,54 @@ const Navbar = () => {
               </div>
               <button
                 className="block md:hidden hover:brightness-95 p-2 rounded-md ml-2 text-[#6B778C]"
-                onClick={() => handleNav(true)}>
+                onClick={() => handleNav(true)}
+              >
                 <RxHamburgerMenu size={30} />
               </button>
 
               {/* Mobile Nav List */}
               <div
                 onClick={() => handleNav(false)}
-                className={`text-slate-800 ${navMobile ? "md:hidden fixed left-0 top-0 w-full h-screen bg-black/70" : ""}`}>
+                className={`text-slate-800 ${navMobile ? "md:hidden fixed left-0 top-0 w-full h-screen bg-black/70" : ""}`}
+              >
                 <div
                   className={
                     navMobile
                       ? "fixed right-0 top-0 w-[240px] h-screen bg-slate-50 p-4 pt-10 ease-in duration-500 flex flex-col gap-4"
                       : "fixed right-[-150%] w-[240px] h-screen bg-slate-50 top-0 p-4 pt-10 ease-in duration-500 flex flex-col gap-4 items-start"
-                  }>
+                  }
+                >
                   <section className="space-y-2">
                     <p className="text-3xl font-bold leading-none">SYNTAX</p>
                     <p className="font-bold">STEI-K 23</p>
-                    <p className="text-sm font-bold italic leading-none mb-10">Code, Create, Connect!</p>
+                    <p className="text-sm font-bold italic leading-none mb-10">
+                      Code, Create, Connect!
+                    </p>
                   </section>
 
                   <section className="flex flex-col gap-1">
-                    <Link href="/" className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2">
+                    <Link
+                      href="/"
+                      className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2"
+                    >
                       <GoHome size={19} /> Home
                     </Link>
-                    <Link href="/tentang-bpa" className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2">
+                    <Link
+                      href="/tentang-bpa"
+                      className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2"
+                    >
                       <GoCopilot size={19} /> BPA
                     </Link>
-                    <Link href="/akademik" className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2">
+                    <Link
+                      href="/akademik"
+                      className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2"
+                    >
                       <IoMdBook size={19} /> Akademik
                     </Link>
                     <Link
                       href="/acara-kemahasiswaan"
-                      className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2">
+                      className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2"
+                    >
                       <RiGroupLine size={19} /> Acara Kemahasiswaan
                     </Link>
                   </section>

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,3 +1,4 @@
+import Footer from "@/components/Footer";
 import { Html, Head, Main, NextScript } from "next/document";
 
 export default function MyDocument() {
@@ -76,6 +77,7 @@ export default function MyDocument() {
       <body>
         <Main />
         <NextScript />
+        <Footer />
       </body>
     </Html>
   );