Merge pull request #55 from SJSUCSClub/feature/54-footer

[Feature] Add Footer

app/(main)/footer.tsx

@@ -0,0 +1,57 @@
+import Link from 'next/link';
+import React from 'react';
+
+import ACMLogo from '@/components/acm-logo';
+import Discord from '@/components/discord';
+import Instagram from '@/components/instagram';
+import LinkedIn from '@/components/linkedin';
+
+const Socials: React.FC = () => {
+  return (
+    <>
+      <Link href="https://discord.gg/4cXE636ax4">
+        <Discord />
+      </Link>
+      <Link href="https://www.instagram.com/sjsuacm/">
+        <Instagram />
+      </Link>
+      <Link href="https://www.linkedin.com/company/sjsu-computer-science-club/about/">
+        <LinkedIn />
+      </Link>
+    </>
+  );
+};
+
+const Footer: React.FC<{}> = () => {
+  return (
+    <footer className="mx-auto flex flex-col items-center justify-between gap-y-[16px] max-width max-lg:px-[16px] max-lg:py-[26px] lg:flex-row">
+      {/* Logo */}
+      <div className="py-[10px]">
+        <ACMLogo />
+      </div>
+
+      {/* Mobile Socials */}
+      <div className="flex h-min flex-row gap-[5px] lg:hidden">
+        <Socials />
+      </div>
+
+      {/* Location */}
+      <div className="flex flex-col justify-center gap-[10px] text-center text-neutral">
+        <div className="max-lg:hidden">
+          Room MQH 227, San Jose State University 1 Washington Sq, San Jose, CA
+          95192
+        </div>
+        <div className="lg:hidden">Room MQH 227, San Jose State University</div>
+        <div className="lg:hidden">1 Washington Sq, San Jose, CA 95192</div>
+        <div>Brought to you by ACM-CS@SJSU © 2024</div>
+      </div>
+
+      {/* Desktop Socials */}
+      <div className="flex h-min flex-row gap-[5px] max-lg:hidden">
+        <Socials />
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

app/(main)/template.tsx

@@ -1,3 +1,4 @@
+import Footer from '@/app/(main)/footer';
 import Navbar from '@/app/(main)/navbar';
 import { SWRProvider } from '@/app/(main)/swr-provider';
 import Session from '@/components/session-wrapper';
@@ -9,6 +10,7 @@ export default function Template({ children }: { children: React.ReactNode }) {
         <Navbar />
       </Session>
       <SWRProvider>{children}</SWRProvider>
+      <Footer />
     </>
   );
 }

components/discord.tsx

@@ -0,0 +1,18 @@
+const Discord: React.FC = () => {
+  return (
+    <svg
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.8333 11.2883C14.2267 11.2883 13.7367 11.9021 13.7367 12.6549C13.7367 13.4077 14.2267 14.0215 14.8333 14.0215C15.44 14.0215 15.93 13.4077 15.93 12.6549C15.93 11.9021 15.44 11.2883 14.8333 11.2883ZM10.1667 11.2883C9.56 11.2883 9.07 11.9021 9.07 12.6549C9.07 13.4077 9.56 14.0215 10.1667 14.0215C10.7733 14.0215 11.2633 13.4077 11.2633 12.6549C11.2633 11.9021 10.7733 11.2883 10.1667 11.2883ZM14.8333 11.2883C14.2267 11.2883 13.7367 11.9021 13.7367 12.6549C13.7367 13.4077 14.2267 14.0215 14.8333 14.0215C15.44 14.0215 15.93 13.4077 15.93 12.6549C15.93 11.9021 15.44 11.2883 14.8333 11.2883ZM10.1667 11.2883C9.56 11.2883 9.07 11.9021 9.07 12.6549C9.07 13.4077 9.56 14.0215 10.1667 14.0215C10.7733 14.0215 11.2633 13.4077 11.2633 12.6549C11.2633 11.9021 10.7733 11.2883 10.1667 11.2883ZM19.5 2H5.5C3.56333 2 2 3.55191 2 5.47442V19.3721C2 21.2946 3.56333 22.8465 5.5 22.8465H18.3333L17.89 21.2136L21.4017 24.7227C21.9967 25.3134 23 24.8964 23 24.0742V5.47442C23 3.55191 21.4367 2 19.5 2ZM18.9983 15.5966C17.4 17.0442 15.3117 17.0558 15.3117 17.0558L14.81 16.3841C15.3233 16.2104 15.7667 15.9788 16.2217 15.6313L16.1167 15.3534C15.2767 15.7355 14.1917 15.9672 12.5 15.9672C10.8083 15.9672 9.72333 15.7355 8.88333 15.3534L8.77833 15.6313C9.23333 15.9788 9.67667 16.2104 10.19 16.3841L9.68833 17.0558C9.68833 17.0558 7.6 17.0442 6.00167 15.5966C5.745 15.3649 5.64 15.0059 5.66333 14.6701C5.955 11.323 6.99333 9.29629 7.36667 8.67089C7.44833 8.52033 7.565 8.40452 7.705 8.30028C8.14833 8.01075 9.25667 7.36219 10.6217 7.22321L10.9717 7.92968C11.4733 7.83703 12.0217 7.76754 12.5 7.76754C12.9667 7.76754 13.5033 7.83703 14.0283 7.92968L14.3783 7.22321C15.685 7.32745 16.84 7.99917 17.295 8.30028C17.435 8.40452 17.5517 8.52033 17.6333 8.67089C18.0067 9.30787 19.045 11.323 19.3367 14.6701C19.36 15.0059 19.255 15.3649 18.9983 15.5966ZM14.8333 11.2883C14.2267 11.2883 13.7367 11.9021 13.7367 12.6549C13.7367 13.4077 14.2267 14.0215 14.8333 14.0215C15.44 14.0215 15.93 13.4077 15.93 12.6549C15.93 11.9021 15.44 11.2883 14.8333 11.2883ZM10.1667 11.2883C9.56 11.2883 9.07 11.9021 9.07 12.6549C9.07 13.4077 9.56 14.0215 10.1667 14.0215C10.7733 14.0215 11.2633 13.4077 11.2633 12.6549C11.2633 11.9021 10.7733 11.2883 10.1667 11.2883Z"
+        fill="#A4A4A4"
+      />
+    </svg>
+  );
+};
+
+export default Discord;

components/instagram.tsx

@@ -0,0 +1,17 @@
+const Instagram: React.FC = () => {
+  return (
+    <svg
+      width="24"
+      height="25"
+      viewBox="0 0 24 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.55556 2C4.48778 2 2 4.61217 2 7.83333V17.1667C2 20.3878 4.48778 23 7.55556 23H16.4444C19.5122 23 22 20.3878 22 17.1667V7.83333C22 4.61217 19.5122 2 16.4444 2H7.55556ZM18.6667 4.33333C19.28 4.33333 19.7778 4.856 19.7778 5.5C19.7778 6.144 19.28 6.66667 18.6667 6.66667C18.0533 6.66667 17.5556 6.144 17.5556 5.5C17.5556 4.856 18.0533 4.33333 18.6667 4.33333ZM12 6.66667C15.0678 6.66667 17.5556 9.27883 17.5556 12.5C17.5556 15.7212 15.0678 18.3333 12 18.3333C8.93222 18.3333 6.44444 15.7212 6.44444 12.5C6.44444 9.27883 8.93222 6.66667 12 6.66667ZM12 9C11.1159 9 10.2681 9.36875 9.64298 10.0251C9.01786 10.6815 8.66667 11.5717 8.66667 12.5C8.66667 13.4283 9.01786 14.3185 9.64298 14.9749C10.2681 15.6313 11.1159 16 12 16C12.8841 16 13.7319 15.6313 14.357 14.9749C14.9821 14.3185 15.3333 13.4283 15.3333 12.5C15.3333 11.5717 14.9821 10.6815 14.357 10.0251C13.7319 9.36875 12.8841 9 12 9Z"
+        fill="#A4A4A4"
+      />
+    </svg>
+  );
+};
+export default Instagram;

components/linkedin.tsx

@@ -0,0 +1,17 @@
+const LinkedIn: React.FC = () => {
+  return (
+    <svg
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.6667 2H4.33333C3.04417 2 2 3.04417 2 4.33333V20.6667C2 21.9558 3.04417 23 4.33333 23H20.6667C21.9558 23 23 21.9558 23 20.6667V4.33333C23 3.04417 21.9558 2 20.6667 2ZM7.52767 18.3333C6.7145 18.3333 6.05533 17.6742 6.05533 16.861V11.6378C6.0565 10.8258 6.71567 10.1667 7.52767 10.1667C8.34083 10.1667 9 10.8258 9 11.639V16.8622C9 17.6742 8.34083 18.3333 7.52767 18.3333ZM7.47633 8.66983C6.57683 8.66983 5.976 8.07017 5.976 7.26983C5.976 6.4695 6.57567 5.86983 7.5755 5.86983C8.475 5.86983 9.07583 6.4695 9.07583 7.26983C9.07583 8.07017 8.47617 8.66983 7.47633 8.66983ZM18.0755 18.3333C17.2892 18.3333 16.651 17.6952 16.651 16.9088V13.8697C16.651 12.6353 15.8915 12.5 15.6068 12.5C15.3222 12.5 14.3725 12.5408 14.3725 13.8697V16.9088C14.3725 17.6952 13.7343 18.3333 12.948 18.3333H12.8535C12.0672 18.3333 11.429 17.6952 11.429 16.9088V11.639C11.429 10.8258 12.0882 10.1667 12.9013 10.1667C13.7145 10.1667 14.3737 10.8258 14.3737 11.639C14.3737 11.639 14.7027 10.1667 16.938 10.1667C18.3602 10.1667 19.5 11.3065 19.5 13.8697V16.9088C19.5 17.6952 18.8618 18.3333 18.0755 18.3333Z"
+        fill="#A4A4A4"
+      />
+    </svg>
+  );
+};
+export default LinkedIn;