refactor: add icons to links

13 files changed, 85 insertions, 20 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;
     }
diff --git a/src/components/List.astro b/src/components/List.astro
index 80af910..d03b0e0 100644
--- a/src/components/List.astro
+++ b/src/components/List.astro
@@ -1,16 +1,23 @@
 ---
 import Link from "./Link.astro";
+import dataList from '../data/user.json';
+
+const items = dataList.links;
 ---
 
 <div class="list" id="list">
-    <Link></Link>
-    <Link></Link>
-    <Link></Link>
-    <Link></Link>
-    <Link></Link>
-    <Link></Link>
-    <Link></Link>
-    <Link></Link>
+    {
+        items.map((item) => {
+            return (
+                <Link 
+                    icon={item.icon} 
+                    title={item.title} 
+                    description={item.description} 
+                    url={item.url}
+                ></Link>
+            )
+        })
+    }
 </div>
 
 <style>
diff --git a/src/components/icons/Dribbble.astro b/src/components/icons/Dribbble.astro
new file mode 100644
index 0000000..b10b0a4
--- /dev/null
+++ b/src/components/icons/Dribbble.astro
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19.9887 11.5716C19.9029 9.94513 19.3313 8.44745 18.4163 7.22097C18.1749 7.48407 17.8785 7.7698 17.4957 8.09159C16.5881 8.85458 15.4887 9.54307 14.1834 10.101C14.3498 10.4506 14.5029 10.7899 14.6376 11.1098L14.6388 11.1125C14.6652 11.1742 14.6879 11.2306 14.7321 11.3418C14.7379 11.3562 14.7433 11.3697 14.7485 11.3825C16.2621 11.2122 17.8576 11.2749 19.4049 11.4845C19.6106 11.5123 19.805 11.5415 19.9887 11.5716ZM10.6044 4.1213C10.7783 4.36621 10.9602 4.62859 11.1803 4.95378C11.7929 5.8589 12.396 6.81391 12.9604 7.79507C13.0749 7.99416 13.187 8.19289 13.2964 8.39112C14.5193 7.90993 15.5296 7.30281 16.3438 6.62486C16.6731 6.35063 16.9383 6.093 17.1403 5.86972C15.7501 4.70277 13.9571 4 12 4C11.524 4 11.0576 4.04158 10.6044 4.1213ZM4.25266 9.99755C4.83145 9.98452 5.48467 9.94941 6.29303 9.87518C7.90024 9.72758 9.54141 9.46249 11.1549 9.05274C10.5719 8.03721 9.93888 7.02331 9.29452 6.05378C8.98479 5.58775 8.68357 5.14992 8.45484 4.82642C6.39541 5.84613 4.83794 7.72658 4.25266 9.99755ZM5.78366 17.036C6.17111 16.4693 6.68061 15.8314 7.35797 15.1374C8.81199 13.6478 10.5286 12.4878 12.5139 11.8473C12.5417 11.8391 12.5604 11.8336 12.576 11.829C12.411 11.4651 12.2562 11.1405 12.1003 10.8342C10.2643 11.3687 8.3303 11.703 6.40279 11.8762C5.46319 11.9606 4.62005 11.9981 4 12.0044C4.00102 13.9112 4.66915 15.662 5.78366 17.036ZM15.0045 19.4166C14.9001 18.8745 14.7669 18.2706 14.5899 17.574C14.2689 16.3112 13.8668 15.012 13.373 13.7078C11.3712 14.4343 9.77574 15.4974 8.54309 16.7649C7.94904 17.3757 7.51244 17.9537 7.22642 18.4203C8.55892 19.4127 10.2109 20 12 20C13.0626 20 14.0769 19.7928 15.0045 19.4166ZM16.8778 18.3414C18.4073 17.1632 19.4985 15.444 19.8652 13.4703C19.5253 13.3865 19.094 13.3005 18.6196 13.2346C17.5756 13.0897 16.5014 13.0655 15.4409 13.2018C15.8933 14.4764 16.2642 15.7332 16.5608 16.9361C16.6903 17.4614 16.7958 17.9358 16.8778 18.3414ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/icons/Facebook.astro b/src/components/icons/Facebook.astro
new file mode 100644
index 0000000..543537c
--- /dev/null
+++ b/src/components/icons/Facebook.astro
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.001 2C6.47813 2 2.00098 6.47715 2.00098 12C2.00098 16.9913 5.65783 21.1283 10.4385 21.8785V14.8906H7.89941V12H10.4385V9.79688C10.4385 7.29063 11.9314 5.90625 14.2156 5.90625C15.3097 5.90625 16.4541 6.10156 16.4541 6.10156V8.5625H15.1931C13.9509 8.5625 13.5635 9.33334 13.5635 10.1242V12H16.3369L15.8936 14.8906H13.5635V21.8785C18.3441 21.1283 22.001 16.9913 22.001 12C22.001 6.47715 17.5238 2 12.001 2Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/icons/Instagram.astro b/src/components/icons/Instagram.astro
new file mode 100644
index 0000000..c51ee39
--- /dev/null
+++ b/src/components/icons/Instagram.astro
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.001 9C10.3436 9 9.00098 10.3431 9.00098 12C9.00098 13.6573 10.3441 15 12.001 15C13.6583 15 15.001 13.6569 15.001 12C15.001 10.3427 13.6579 9 12.001 9ZM12.001 7C14.7614 7 17.001 9.2371 17.001 12C17.001 14.7605 14.7639 17 12.001 17C9.24051 17 7.00098 14.7629 7.00098 12C7.00098 9.23953 9.23808 7 12.001 7ZM18.501 6.74915C18.501 7.43926 17.9402 7.99917 17.251 7.99917C16.5609 7.99917 16.001 7.4384 16.001 6.74915C16.001 6.0599 16.5617 5.5 17.251 5.5C17.9393 5.49913 18.501 6.0599 18.501 6.74915ZM12.001 4C9.5265 4 9.12318 4.00655 7.97227 4.0578C7.18815 4.09461 6.66253 4.20007 6.17416 4.38967C5.74016 4.55799 5.42709 4.75898 5.09352 5.09255C4.75867 5.4274 4.55804 5.73963 4.3904 6.17383C4.20036 6.66332 4.09493 7.18811 4.05878 7.97115C4.00703 9.0752 4.00098 9.46105 4.00098 12C4.00098 14.4745 4.00753 14.8778 4.05877 16.0286C4.0956 16.8124 4.2012 17.3388 4.39034 17.826C4.5591 18.2606 4.7605 18.5744 5.09246 18.9064C5.42863 19.2421 5.74179 19.4434 6.17187 19.6094C6.66619 19.8005 7.19148 19.9061 7.97212 19.9422C9.07618 19.9939 9.46203 20 12.001 20C14.4755 20 14.8788 19.9934 16.0296 19.9422C16.8117 19.9055 17.3385 19.7996 17.827 19.6106C18.2604 19.4423 18.5752 19.2402 18.9074 18.9085C19.2436 18.5718 19.4445 18.2594 19.6107 17.8283C19.8013 17.3358 19.9071 16.8098 19.9432 16.0289C19.9949 14.9248 20.001 14.5389 20.001 12C20.001 9.52552 19.9944 9.12221 19.9432 7.97137C19.9064 7.18906 19.8005 6.66149 19.6113 6.17318C19.4434 5.74038 19.2417 5.42635 18.9084 5.09255C18.573 4.75715 18.2616 4.55693 17.8271 4.38942C17.338 4.19954 16.8124 4.09396 16.0298 4.05781C14.9258 4.00605 14.5399 4 12.001 4ZM12.001 2C14.7176 2 15.0568 2.01 16.1235 2.06C17.1876 2.10917 17.9135 2.2775 18.551 2.525C19.2101 2.77917 19.7668 3.1225 20.3226 3.67833C20.8776 4.23417 21.221 4.7925 21.476 5.45C21.7226 6.08667 21.891 6.81333 21.941 7.8775C21.9885 8.94417 22.001 9.28333 22.001 12C22.001 14.7167 21.991 15.0558 21.941 16.1225C21.8918 17.1867 21.7226 17.9125 21.476 18.55C21.2218 19.2092 20.8776 19.7658 20.3226 20.3217C19.7668 20.8767 19.2076 21.22 18.551 21.475C17.9135 21.7217 17.1876 21.89 16.1235 21.94C15.0568 21.9875 14.7176 22 12.001 22C9.28431 22 8.94514 21.99 7.87848 21.94C6.81431 21.8908 6.08931 21.7217 5.45098 21.475C4.79264 21.2208 4.23514 20.8767 3.67931 20.3217C3.12348 19.7658 2.78098 19.2067 2.52598 18.55C2.27848 17.9125 2.11098 17.1867 2.06098 16.1225C2.01348 15.0558 2.00098 14.7167 2.00098 12C2.00098 9.28333 2.01098 8.94417 2.06098 7.8775C2.11014 6.8125 2.27848 6.0875 2.52598 5.45C2.78014 4.79167 3.12348 4.23417 3.67931 3.67833C4.23514 3.1225 4.79348 2.78 5.45098 2.525C6.08848 2.2775 6.81348 2.11 7.87848 2.06C8.94514 2.0125 9.28431 2 12.001 2Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/icons/Linkedin.astro b/src/components/icons/Linkedin.astro
new file mode 100644
index 0000000..fa5b2bd
--- /dev/null
+++ b/src/components/icons/Linkedin.astro
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.94048 4.99993C6.94011 5.81424 6.44608 6.54702 5.69134 6.85273C4.9366 7.15845 4.07187 6.97605 3.5049 6.39155C2.93793 5.80704 2.78195 4.93715 3.1105 4.19207C3.43906 3.44699 4.18654 2.9755 5.00048 2.99993C6.08155 3.03238 6.94097 3.91837 6.94048 4.99993ZM7.00048 8.47993H3.00048V20.9999H7.00048V8.47993ZM13.3205 8.47993H9.34048V20.9999H13.2805V14.4299C13.2805 10.7699 18.0505 10.4299 18.0505 14.4299V20.9999H22.0005V13.0699C22.0005 6.89993 14.9405 7.12993 13.2805 10.1599L13.3205 8.47993Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/icons/Shop.astro b/src/components/icons/Shop.astro
new file mode 100644
index 0000000..5b0a6d0
--- /dev/null
+++ b/src/components/icons/Shop.astro
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7.00488 7.99966V5.99966C7.00488 3.23824 9.24346 0.999664 12.0049 0.999664C14.7663 0.999664 17.0049 3.23824 17.0049 5.99966V7.99966H20.0049C20.5572 7.99966 21.0049 8.44738 21.0049 8.99966V20.9997C21.0049 21.5519 20.5572 21.9997 20.0049 21.9997H4.00488C3.4526 21.9997 3.00488 21.5519 3.00488 20.9997V8.99966C3.00488 8.44738 3.4526 7.99966 4.00488 7.99966H7.00488ZM7.00488 9.99966H5.00488V19.9997H19.0049V9.99966H17.0049V11.9997H15.0049V9.99966H9.00488V11.9997H7.00488V9.99966ZM9.00488 7.99966H15.0049V5.99966C15.0049 4.34281 13.6617 2.99966 12.0049 2.99966C10.348 2.99966 9.00488 4.34281 9.00488 5.99966V7.99966Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/icons/Twitch.astro b/src/components/icons/Twitch.astro
new file mode 100644
index 0000000..9549063
--- /dev/null
+++ b/src/components/icons/Twitch.astro
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M21.001 3V14.7391L16.3053 19.4348H12.3923L9.95523 21.7826H6.91402V19.4348H3.00098V6.13043L4.2281 3H21.001ZM19.4358 4.56522H6.13141V16.3043H9.26185V18.6522L11.6097 16.3043H16.3053L19.4358 13.1739V4.56522ZM16.3053 7.69565V12.3913H14.7401V7.69565H16.3053ZM12.3923 7.69565V12.3913H10.8271V7.69565H12.3923Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/icons/Url.astro b/src/components/icons/Url.astro
new file mode 100644
index 0000000..2a5a962
--- /dev/null
+++ b/src/components/icons/Url.astro
@@ -0,0 +1 @@
+<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>
\ No newline at end of file
diff --git a/src/components/icons/X-twitter.astro b/src/components/icons/X-twitter.astro
new file mode 100644
index 0000000..a2cebe9
--- /dev/null
+++ b/src/components/icons/X-twitter.astro
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.2048 2.25H21.5128L14.2858 10.51L22.7878 21.75H16.1308L10.9168 14.933L4.95084 21.75H1.64084L9.37084 12.915L1.21484 2.25H8.04084L12.7538 8.481L18.2048 2.25ZM17.0438 19.77H18.8768L7.04484 4.126H5.07784L17.0438 19.77Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/icons/Youtube.astro b/src/components/icons/Youtube.astro
new file mode 100644
index 0000000..52fe4ee
--- /dev/null
+++ b/src/components/icons/Youtube.astro
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.2439 4C12.778 4.00294 14.1143 4.01586 15.5341 4.07273L16.0375 4.09468C17.467 4.16236 18.8953 4.27798 19.6037 4.4755C20.5486 4.74095 21.2913 5.5155 21.5423 6.49732C21.942 8.05641 21.992 11.0994 21.9982 11.8358L21.9991 11.9884L21.9991 11.9991C21.9991 11.9991 21.9991 12.0028 21.9991 12.0099L21.9982 12.1625C21.992 12.8989 21.942 15.9419 21.5423 17.501C21.2878 18.4864 20.5451 19.261 19.6037 19.5228C18.8953 19.7203 17.467 19.8359 16.0375 19.9036L15.5341 19.9255C14.1143 19.9824 12.778 19.9953 12.2439 19.9983L12.0095 19.9991L11.9991 19.9991C11.9991 19.9991 11.9956 19.9991 11.9887 19.9991L11.7545 19.9983C10.6241 19.9921 5.89772 19.941 4.39451 19.5228C3.4496 19.2573 2.70692 18.4828 2.45587 17.501C2.0562 15.9419 2.00624 12.8989 2 12.1625V11.8358C2.00624 11.0994 2.0562 8.05641 2.45587 6.49732C2.7104 5.51186 3.45308 4.73732 4.39451 4.4755C5.89772 4.05723 10.6241 4.00622 11.7545 4H12.2439ZM9.99911 8.49914V15.4991L15.9991 11.9991L9.99911 8.49914Z"></path></svg>
\ No newline at end of file
diff --git a/src/data/user.json b/src/data/user.json
index ddc00ef..0a05f27 100644
--- a/src/data/user.json
+++ b/src/data/user.json
@@ -3,37 +3,44 @@
     "profession": "Web Designer",
     "links": [
         {
-            "icon": "link",
+            "url": "#",
+            "icon": "url",
             "title": "Personal Portfolio",
             "description": "All my latest design projects"
         },
         {
+            "url": "#",
             "icon": "youtube",
             "title": "Youtube Channel",
             "description": "All my latest design projects"
         },
         {
+            "url": "#",
             "icon": "shop",
             "title": "Template Store",
             "description": "Discover templates that suit you"
         },
         {
-            "icon": "link",
+            "url": "#",
+            "icon": "url",
             "title": "Design Podcast",
             "description": "Every Friday a new episode"
         },
         {
+            "url": "#",
             "icon": "instagram",
             "title": "Instagram Profile",
             "description": "Designer lifestyle and more"
         },
         {
+            "url": "#",
             "icon": "dribble",
             "title": "Dribbble Shots",
             "description": "Know more about my work"
         },
         {
-            "icon": "link",
+            "url": "#",
+            "icon": "url",
             "title": "Free Resources",
             "description": "Collection of free resources"
         }
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index b80dd61..e19e342 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -41,4 +41,9 @@ const { title } = Astro.props;
 		background: var(--zinc-950);
         color: var(--zinc-50)
 	}
+
+    .link-icon svg {
+        width: 1.5rem;
+        fill: var(--zinc-50)
+    }
 </style>