refactor: add icons to links

1 files changed, 46 insertions, 9 deletions

diff --git a/src/components/Link.astro b/src/components/Link.astro
index efd75f6..5ff75a1 100644
--- a/src/components/Link.astro
+++ b/src/components/Link.astro
@@ -1,10 +1,52 @@
-<a href="#" class="link">
+---
+import { componentIsHTMLElement } from "astro/runtime/server/render/dom.js";
+import Dribbble from "./icons/Dribbble.astro";
+import Facebook from "./icons/Facebook.astro";
+import Instagram from "./icons/Instagram.astro";
+import Linkedin from "./icons/Linkedin.astro";
+import Shop from "./icons/Shop.astro";
+import Twitch from "./icons/Twitch.astro";
+import Url from "./icons/Url.astro";
+import XTwitter from "./icons/X-twitter.astro";
+import Youtube from "./icons/Youtube.astro";
+
+const icons = {
+    dribbble: Dribbble,
+    facebook: Facebook,
+    instagram: Instagram,
+    linkedin: Linkedin,
+    shop: Shop,
+    twitch: Twitch,
+    url: Url,
+    xtwitter: XTwitter,
+    youtube: Youtube
+}
+
+interface Props {
+    icon: string;
+	title: string;
+    description: string;
+    url: string;
+}
+
+const { icon, title, description, url } = Astro.props;
+---
+
+<a href={url} class="link">
     <span class="link-icon">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.3638 15.5355L16.9496 14.1213L18.3638 12.7071C20.3164 10.7545 20.3164 7.58866 18.3638 5.63604C16.4112 3.68341 13.2453 3.68341 11.2927 5.63604L9.87849 7.05025L8.46428 5.63604L9.87849 4.22182C12.6122 1.48815 17.0443 1.48815 19.778 4.22182C22.5117 6.95549 22.5117 11.3876 19.778 14.1213L18.3638 15.5355ZM15.5353 18.364L14.1211 19.7782C11.3875 22.5118 6.95531 22.5118 4.22164 19.7782C1.48797 17.0445 1.48797 12.6123 4.22164 9.87868L5.63585 8.46446L7.05007 9.87868L5.63585 11.2929C3.68323 13.2455 3.68323 16.4113 5.63585 18.364C7.58847 20.3166 10.7543 20.3166 12.7069 18.364L14.1211 16.9497L15.5353 18.364ZM14.8282 7.75736L16.2425 9.17157L9.17139 16.2426L7.75717 14.8284L14.8282 7.75736Z"></path></svg>
+        {icon === 'dribble' && <Dribbble></Dribbble>}
+        {icon === 'facebook' && <Facebook></Facebook>}
+        {icon === 'instagram' && <Instagram></Instagram>}
+        {icon === 'linkedin' && <Linkedin></Linkedin>}
+        {icon === 'shop' && <Shop></Shop>}
+        {icon === 'twitch' && <Twitch></Twitch>}
+        {icon === 'url' && <Url></Url>}
+        {icon === 'xtwitter' && <XTwitter></XTwitter>}
+        {icon === 'youtube' && <Youtube></Youtube>}
     </span>
     <div class="link-content">
-        <h2 class="link-title">Lorem Insup dolor sit ammet</h2>
-        <p class="link-description">Other description link</p>
+        <h2 class="link-title">{title}</h2>
+        <p class="link-description">{description}</p>
     </div>
 </a>
 
@@ -28,11 +70,6 @@
         align-items: center;   
     }
 
-    .link-icon svg {
-        width: 1.5rem;
-        fill: var(--zinc-50)
-    }
-
     .link-title, .link-description {
         font-size: 1rem;
     }