social media to footer

Author: andrew-l3

components/Footer.tsx

@@ -1,29 +1,42 @@
 import Link from 'next/link';
+//import SponsorLinks from './Sponsors/sponsorlinks';
+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">
+      <div className="sm:flex justify-between pb-10">
+        <div className="flex flex-col gap-10">
+          <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"
+              className="ml-10 sm:block hidden"
             />
-          </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="grid grid-cols-8 gap-4">
+          {socialLinks.map((item, index) => {
+            return (
+              <a key={index} className="" href={item.href}>
+                <img className="h-4" src={item.src} alt={item.alt} />
+              </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 csesoc@csesoc.org.au</p>

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 csesoc@csesoc.org.au</p>
-          <p>© 2021 — CSESoc UNSW</p>
-        </div>
-      </div>
+      <Footer />
       <img
         src="assets/sponsors_backdrop.svg"
         alt="Sponsors backdrop"

pages/index.tsx

@@ -3,6 +3,7 @@ import Sponsors from '@/components/Sponsors/index';
 import About from '@/components/About';
 import Event from '@/components/Event';
 import ResourcesAndContacts from '@/components/ResourcesAndContacts';
+import Footer from '@/components/Footer';
 
 export default function Home() {
   return (

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'
+  }
+];