CW2-7-move-social-media-to-footer

components/Footer.tsx

@@ -1,38 +1,51 @@
 import Link from 'next/link';
+import Image from 'next/image';
+import { socialLinks } from '../public/data/data';
 
 const Footer = () => {
   return (
     <section>
-      <div className="sm:flex justify-between">
-        <div className="flex items-center">
-          <img src="assets/csesoc_logo_white.svg" alt="CSESoc Logo" />
-          <Link href="/flag/ollie_is_hiding.png" target="_blank" className="sm:hidden block">
-            <img
-              src="/flag/ollie_is_hiding.png"
-              alt="Ollie"
-              draggable="false"
-              width={60}
-              height={60}
-              className="ml-10"
-            />
-          </Link>
-          <img
-            src="/flag/ollie_is_hiding.png"
-            alt="Ollie"
-            draggable="false"
-            width={60}
-            height={60}
-            className="ml-10 sm:block hidden"
-          />
+      <div className="sm:flex justify-between pb-10">
+        <div className="flex flex-col gap-10">
+          <div className="flex items-center">
+            <Link href="/" className="flex">
+              <Image src="assets/csesoc_logo_white.svg" width={231} height={53} alt="CSESoc Logo" />
+              <Image
+                src="/flag/ollie_is_hiding.png"
+                alt="Ollie"
+                draggable="false"
+                width={60}
+                height={60}
+                className="ml-10"
+              />
+            </Link>
+          </div>
+          <div className="grid grid-cols-8 gap-4">
+            {socialLinks.map((item, index) => {
+              return (
+                <a key={index} className="" href={item.href}>
+                  <Image
+                    className="h-4 fill-white min-w-full hover:scale-125 transition-all"
+                    src={item.src}
+                    alt={item.alt}
+                    height={0}
+                    width={0}
+                  />
+                </a>
+              );
+            })}
+          </div>
         </div>
         <div className="flex flex-col max-w-[14rem] sm:mt-0 mt-10 font-light">
           <p className="mb-6">B03 CSE Building K17, UNSW [email protected]</p>
           <p>© 2021 — CSESoc UNSW</p>
         </div>
       </div>
-      <img
+      <Image
         src="assets/sponsors_backdrop.svg"
         alt="Sponsors backdrop"
+        height={0}
+        width={0}
         className="absolute bottom-0 left-0 w-screen -z-10"
       />
     </section>

components/Sponsors/index.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import React from 'react';
+import Footer from '../Footer';
 
 const Sponsors = () => {
   const firstRowBoxesStyling =
@@ -46,33 +47,7 @@ const Sponsors = () => {
           </div>
         </div>
       </div>
-      <div className="sm:flex justify-between">
-        <div className="flex items-center">
-          <img src="assets/csesoc_logo_white.svg" alt="CSESoc Logo" />
-          <Link href="/flag/ollie_is_hiding.png" target="_blank" className="sm:hidden block">
-            <img
-              src="/flag/ollie_is_hiding.png"
-              alt="Ollie"
-              draggable="false"
-              width={60}
-              height={60}
-              className="ml-10"
-            />
-          </Link>
-          <img
-            src="/flag/ollie_is_hiding.png"
-            alt="Ollie"
-            draggable="false"
-            width={60}
-            height={60}
-            className="ml-10 sm:block hidden"
-          />
-        </div>
-        <div className="flex flex-col max-w-[14rem] sm:mt-0 mt-10 font-light">
-          <p className="mb-6">B03 CSE Building K17, UNSW [email protected]</p>
-          <p>© 2021 — CSESoc UNSW</p>
-        </div>
-      </div>
+      <Footer />
       <img
         src="assets/sponsors_backdrop.svg"
         alt="Sponsors backdrop"

public/data/data.ts

@@ -4,6 +4,12 @@ export type sponsorInfo = {
   alt: string;
 };
 
+export type socialInfo = {
+  href: string;
+  src: string;
+  alt: string;
+};
+
 export const diamondLinks: sponsorInfo[] = [
   {
     href: 'https://www.janestreet.com/',
@@ -102,3 +108,41 @@ export const silverLinks: sponsorInfo[] = [
     alt: 'Canva logo'
   }
 ];
+
+export const socialLinks: socialInfo[] = [
+  {
+    href: 'https://bit.ly/CSESocDiscord',
+    src: 'assets/discord_logo.svg',
+    alt: 'Discord'
+  },
+  {
+    href: 'https://www.facebook.com/csesoc/',
+    src: 'assets/fb_logo.svg',
+    alt: 'Facebook'
+  },
+  {
+    href: 'https://twitter.com/csesoc?lang=en',
+    src: 'assets/x_twitter_icon.svg',
+    alt: 'X/Twitter'
+  },
+  {
+    href: 'https://www.youtube.com/@CSESocUNSW',
+    src: 'assets/youtube_logo.svg',
+    alt: 'Youtube'
+  },
+  {
+    href: 'https://www.instagram.com/csesoc_unsw/?hl=en',
+    src: 'assets/instagram_logo.svg',
+    alt: 'Instagram'
+  },
+  {
+    href: 'https://www.tiktok.com/@csesoc?lang=en',
+    src: 'assets/tiktok_logo.svg',
+    alt: 'TikTok'
+  },
+  {
+    href: 'https://www.linkedin.com/company/csesoc?originalSubdomain=au',
+    src: 'assets/linkedin_logo.svg',
+    alt: 'LinkedIn'
+  }
+];