ThatMarko/issue223 (acm-uic#224)

* Add central file that contains all the social media links * Update footer * Modify SocialMediaBubbles to accept link and be clickable. * Update SocialMediaBubbles with links
MishraTanishq619 · Aug 22, 2023 · c5c8b71 · c5c8b71
1 parent b6b4f31
commit c5c8b71
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 74 deletions.
diff --git a/src/api/SocialMediaLinks/index.js b/src/api/SocialMediaLinks/index.js
@@ -0,0 +1,9 @@
+const SocialLinks = {
+    "LinkedIn": "https://www.linkedin.com/in/sparkhacks-uic-343612269/",
+    "Facebook": "https://www.facebook.com/profile.php?id=100090984219952",
+    "Twitter": "https://twitter.com/SparkhacksAtUIC",
+    "Instagram": "https://www.instagram.com/sparkhacksuic/",
+    "YouTube": "https://www.youtube.com/channel/UC9CxYBwFup_SCKp38-CQx8Q"
+}
+
+export default SocialLinks
diff --git a/src/components/DesktopSMBubbles/index.jsx b/src/components/DesktopSMBubbles/index.jsx
@@ -1,19 +1,20 @@
 import { FacebookSMBubble, InstagramSMBubble, LinkedinSMBubble, TwitterSMBubble, YoutubeSMBubble } from "../SocialMediaBubbles";
 
-export default function DesktopSMBubbles() {
-    return( 
+export default function DesktopSMBubbles({links}) {
+    console.log(links)
+    return(
         <div className="grid h-screen place-items-center">  
             <div className="relative items-center justify-center inline-flex w-7/12" >
                 <div className="relative items-center justify-center inline-flex z-0">
-                    <InstagramSMBubble/>
+                    <InstagramSMBubble link = {links.Instagram} />
                         <div className="relative items-center justify-center inline-flex w-5/12 z-10">
-                            <LinkedinSMBubble/>
+                            <LinkedinSMBubble link = {links.LinkedIn}/>
                             <div className="relative items-center justify-center inline-flex w-3/12 z-20">
-                                <YoutubeSMBubble/>
+                                <YoutubeSMBubble link = {links.YouTube}/>
                             </div>
-                            <TwitterSMBubble/>
+                            <TwitterSMBubble link = {links.Twitter}/>
                         </div>
-                    <FacebookSMBubble/>
+                    <FacebookSMBubble link = {links.Facebook}/>
                 </div>
             </div>
         </div>

diff --git a/src/components/MobileSMBubbles/index.jsx b/src/components/MobileSMBubbles/index.jsx
@@ -1,3 +1,4 @@
+
 import {
   FacebookSMBubble,
   InstagramSMBubble,
@@ -6,23 +7,23 @@ import {
   YoutubeSMBubble,
 } from "../SocialMediaBubbles";
 
-export default function MobileSMBubbles() {
+export default function MobileSMBubbles({links}) {
   return (
     <div className="flex flex-col -space-y-16 ">
       <div className=" items-center justify-center inline-flex z-0">
-        <InstagramSMBubble />
+        <InstagramSMBubble link = {links.Instagram} />
       </div>
       <div className=" items-center justify-center inline-flex z-10">
-        <LinkedinSMBubble />
+        <LinkedinSMBubble link = {links.LinkedIn} />
       </div>
       <div className=" items-center justify-center inline-flex z-20">
-        <YoutubeSMBubble />
+        <YoutubeSMBubble link = {links.YouTube} />
       </div>
       <div className=" items-center justify-center inline-flex z-30">
-        <TwitterSMBubble />
+        <TwitterSMBubble link = {links.Twitter} />
       </div>
       <div className=" items-center justify-center inline-flex z-40">
-        <FacebookSMBubble />
+        <FacebookSMBubble link = {links.Facebook}/>
       </div>
     </div>
   );

diff --git a/src/components/SocialMediaBubbles/index.jsx b/src/components/SocialMediaBubbles/index.jsx
@@ -1,60 +1,84 @@
-export function FacebookSMBubble() {
-    return (
-        <div>
-        <a href='https://www.facebook.com/profile.php?id=100090984219952' target="_blank" rel="noreferrer">
-            <button className="relative bg-primary h-60 w-60 rounded-full border-8 border-primary-dark items-center justify-center inline-flex">
-                <img className='w-2/4 h-2/4' src={require('../../assets/icons/facebook-icon.png')} alt="facebook.icon"/>
-            </button>
-            </a>
-        </div>
-    );
+export function FacebookSMBubble({ link }) {
+  return (
+    <div>
+      <button
+        onClick={() => (window.location.href = link)}
+        className="relative bg-primary h-60 w-60 rounded-full border-8 border-primary-dark items-center justify-center inline-flex"
+      >
+        <img
+          className="w-2/4 h-2/4"
+          src={require("../../assets/icons/facebook-icon.png")}
+          alt="facebook.icon"
+        />
+      </button>
+    </div>
+  );
 }
 
-export function InstagramSMBubble() {
-    return (
-      <div>
-        <a href="https://www.instagram.com/sparkhacksuic/" target="_blank" rel="noopener noreferrer">
-          <button className="relative bg-primary h-60 w-60 rounded-full border-8 border-primary-dark items-center justify-center inline-flex">
-            <img className="w-2/4 h-2/4" src={require("../../assets/icons/instagram-icon.png")} alt="instagram.icon" />
-          </button>
-        </a>
-      </div>
-    );
-  }
-export function LinkedinSMBubble() {
-    return (
-        <div>
-        <a href='https://www.linkedin.com/in/sparkhacks-uic-343612269/' target="_blank" rel="noreferrer">
-            <button className="relative bg-primary h-60 w-60 rounded-full border-8 border-primary-dark items-center justify-center inline-flex">
-                <img className='w-2/4 h-2/4' src={require('../../assets/icons/linkedin-icon.png')} alt="linkedin.icon"/>
-            </button>
-            </a>
-        </div>
-    );
+export function InstagramSMBubble({ link }) {
+  return (
+    <div>
+      <button
+        onClick={() => (window.location.href = link)}
+        className="relative bg-primary h-60 w-60 rounded-full border-8 border-primary-dark items-center justify-center inline-flex"
+      >
+        <img
+          className="w-2/4 h-2/4"
+          src={require("../../assets/icons/instagram-icon.png")}
+          alt="instagram.icon"
+        />
+      </button>
+    </div>
+  );
 }
 
-export function TwitterSMBubble() {
-    return (
-        <div>
-        <a href='https://twitter.com/SparkhacksAtUIC' target="_blank" rel="noreferrer">
-            <button className="relative bg-primary h-60 w-60 rounded-full border-8 border-primary-dark items-center justify-center inline-flex">
-                <img className='w-2/4 h-2/4' src={require('../../assets/icons/twitter-icon.png')} alt="twitter.icon"/>
-            </button>
-            </a>
-        </div>
-    );
+export function LinkedinSMBubble({ link }) {
+  return (
+    <div>
+      <button
+        onClick={() => (window.location.href = link)}
+        className="relative bg-primary h-60 w-60 rounded-full border-8 border-primary-dark items-center justify-center inline-flex"
+      >
+        <img
+          className="w-2/4 h-2/4"
+          src={require("../../assets/icons/linkedin-icon.png")}
+          alt="linkedin.icon"
+        />
+      </button>
+    </div>
+  );
 }
 
-export function YoutubeSMBubble() {
-    return (
-        <div>
-        <a href='https://www.youtube.com/channel/UC9CxYBwFup_SCKp38-CQx8Q' target="_blank" rel="noreferrer">
-            <button className="relative bg-primary h-60 w-60 rounded-full border-8 border-primary-dark items-center justify-center inline-flex">
-                <img className='w-2/4 h-2/4' src={require('../../assets/icons/youtube-icon.png')} alt="youtube.icon"/>
-            </button>
-            </a>
-        </div>
-    );
+export function TwitterSMBubble({ link }) {
+  return (
+    <div>
+      <button
+        onClick={() => (window.location.href = link)}
+        className="relative bg-primary h-60 w-60 rounded-full border-8 border-primary-dark items-center justify-center inline-flex"
+      >
+        <img
+          className="w-2/4 h-2/4"
+          src={require("../../assets/icons/twitter-icon.png")}
+          alt="twitter.icon"
+        />
+      </button>
+    </div>
+  );
 }
 
-
+export function YoutubeSMBubble({ link }) {
+  return (
+    <div>
+      <button
+        onClick={() => (window.location.href = link)}
+        className="relative bg-primary h-60 w-60 rounded-full border-8 border-primary-dark items-center justify-center inline-flex"
+      >
+        <img
+          className="w-2/4 h-2/4"
+          src={require("../../assets/icons/youtube-icon.png")}
+          alt="youtube.icon"
+        />
+      </button>
+    </div>
+  );
+}
diff --git a/src/pages/layout.js b/src/pages/layout.js
@@ -1,7 +1,9 @@
+
 import './layout.css'
 import { Link, Outlet } from 'react-router-dom'
 import sparkLogo from "../assets/images/sparkHacksLogo.png"
 import { useState } from 'react'
+import SocialLinks from "../api/SocialMediaLinks"
 
 function getCurrentPage() {
   let path = window.location.pathname
@@ -47,12 +49,12 @@ export default function Home(){
                       </div>
                       <div className='text-center'>
                           <h4>Social</h4>
-                          <ul>
-                              <li><a href='https://www.instagram.com/sparkhacksuic/' target="_blank" rel="noreferrer">Instagram</a></li>
-                              <li><a href='https://www.facebook.com/profile.php?id=100090984219952' target="_blank" rel="noreferrer">Facebook</a></li>
-                              <li><a href='https://www.youtube.com/channel/UC9CxYBwFup_SCKp38-CQx8Q' target="_blank" rel="noreferrer">Youtube</a></li>
-                              <li><a href='https://twitter.com/SparkhacksAtUIC' target="_blank" rel="noreferrer">Twitter</a></li>
-                              <li><a href='https://www.linkedin.com/in/sparkhacks-uic-343612269/' target="_blank" rel="noreferrer">LinkedIn</a></li>
+                          <ul> 
+                              <li><a href={SocialLinks.Instagram}>Instagram</a></li>
+                              <li><a href={SocialLinks.Facebook}>Facebook</a></li>
+                              <li><a href={SocialLinks.YouTube}>YouTube</a></li>
+                              <li><a href={SocialLinks.Twitter}>Twitter</a></li>
+                              <li><a href={SocialLinks.LinkedIn}>LinkedIn</a></li>
                           </ul>
                       </div>
                   </div>
@@ -65,4 +67,4 @@ export default function Home(){
             </div>
     </div>
   )
-}
+}
diff --git a/src/pages/social.js b/src/pages/social.js
@@ -4,16 +4,18 @@ import DesktopNewsletter from "../components/DesktopNewsletter";
 import MobileSMBubbles from "../components/MobileSMBubbles";
 import MobileNewsletter from "../components/MobileNewsletter"
 
+import SocialLinks from "../api/SocialMediaLinks";
+
 export default function Social() {
   return (
     <div>
       <div className="hidden lg:block">
         <DesktopNewsletter />
-        <DesktopSMBubbles />
+        <DesktopSMBubbles links={SocialLinks} />
       </div>
       <div className="lg:hidden">
         <MobileNewsletter />
-        <MobileSMBubbles />
+        <MobileSMBubbles links={SocialLinks} />
       </div>
     </div>
   );