Major re-work!

src/components/SocialLinks.astro

@@ -2,22 +2,37 @@
 import { Icon } from 'astro-icon/components';
 import SpotifyIcon from './SpotifyIcon';
 import { socialLinks } from '../config/data';
+
+// Helper function to check if icon is a string (Astro icon)
+function isAstroIcon(icon: any): icon is string {
+  return typeof icon === 'string';
+}
+
+// Helper function to check if icon is SpotifyIcon component
+function isSpotifyIcon(icon: any): boolean {
+  return icon === SpotifyIcon;
+}
 ---
 
 <div class="flex flex-row gap-1 sm:gap-4 text-3xl">
-  {socialLinks.map((link) => (
-    link.id === 'spotify' ? (
-      <SpotifyIcon profileUrl={link.url} client:load />
-    ) : (
-      <a
-        href={link.url}
-        target={link.url.startsWith('http') ? '_blank' : undefined}
-        rel={link.url.startsWith('http') ? 'noopener noreferrer' : undefined}
-        aria-label={link.ariaLabel}
-        class="hover:text-primary transition-colors"
-      >
-        <Icon name={link.icon} />
-      </a>
-    )
-  ))}
+  {socialLinks.map((link) => {
+    if (isSpotifyIcon(link.icon)) {
+      return (
+        <SpotifyIcon profileUrl={link.url} client:load />
+      );
+    } else if (isAstroIcon(link.icon)) {
+      return (
+        <a
+          href={link.url}
+          target={link.url.startsWith('http') ? '_blank' : undefined}
+          rel={link.url.startsWith('http') ? 'noopener noreferrer' : undefined}
+          aria-label={link.ariaLabel}
+          class="hover:text-primary transition-colors"
+        >
+          <Icon name={link.icon} />
+        </a>
+      );
+    }
+    return null;
+  })}
 </div>