Merge pull request #146 from codersforcauses/issue-133-Change_footer_game_development_links

Issue 133 change footer game development links

Author: SafetyInObscurity

client/src/components/main/Footer.tsx

@@ -125,15 +125,13 @@ export default function Footer() {
                   development club
                 </p>
                 <div className="flex gap-3 pt-2">
-                  {Object.entries(social_media).map(
-                    ([platform, data], index) => (
-                      <SocialIconButton
-                        key={index}
-                        url={data.url}
-                        socialMediaName={platform}
-                      />
-                    ),
-                  )}
+                  {social_media.map((data) => (
+                    <SocialIconButton
+                      key={data.alt_text}
+                      url={data.url}
+                      altText={data.alt_text}
+                    />
+                  ))}
                 </div>
               </div>
               <LinksList

client/src/components/ui/SocialIconButton.tsx

@@ -4,31 +4,19 @@ import { SocialIcon } from "react-social-icons";
 
 import { cssVarAsHSL } from "@/lib/utils";
 
-// this way, we can use the fields from the social media
-// table directly, in several other places throughout the site
 export type SocialMedia = {
   url: string;
-  socialMediaName: string;
   altText?: string;
-  // modify this type to support optional modification to the
-  // social media icons, like a one-size-fits-all styling property
-  // specifically for react-icons
-  // for now, lets keep it simple
 };
 
 /**
  * Reusable social media icon button component
  * Handles hover animations and styling with Motion values for colors
  */
-export default function SocialIconButton({
-  url,
-  socialMediaName,
-  altText,
-}: SocialMedia) {
+export default function SocialIconButton({ url, altText }: SocialMedia) {
   return (
     <motion.div
       className="group rounded-xl border border-white/10 bg-white/5 p-2.5"
-      aria-label={socialMediaName}
       whileHover={{
         scale: 1.1,
         y: -4,
@@ -50,12 +38,7 @@ export default function SocialIconButton({
           damping: 17,
         }}
       >
-        <SocialIcon
-          network={socialMediaName}
-          url={url}
-          label={altText}
-          className="h-5 w-5"
-        />
+        <SocialIcon url={url} label={altText} className="h-5 w-5" />
       </motion.span>
     </motion.div>
   );

client/src/gamedev-metadata.json

@@ -1,10 +1,16 @@
 {
-  "social_media": {
-    "x": { "url": "twitter.com", "alt_text": "X (Twitter)" },
-    "discord": { "url": "discord.com" },
-    "github": { "url": "github.com", "alt_text": "GitHub" },
-    "youtube": { "url": "youtube.com", "alt_text": "YouTube" }
-  },
-  "art_showcase_description": "Here are some of our favourite artworks from this years gamejams!",
-  "game_showcase_description": "Here are some winning games of our recent game jams"
+  "social_media": [
+    {
+      "url": "https://www.facebook.com/people/Game-Development-UWA/61576948012356/",
+      "alt_text": "Facebook"
+    },
+    {
+      "url": "https://discord.com/invite/JvnuVyMUff",
+      "alt_text": "Discord"
+    },
+    {
+      "url": "https://www.instagram.com/gamedevelopmentuwa",
+      "alt_text": "Instagram"
+    }
+  ]
 }