From 42213ae52905cd1a3b5bd4369d3d3b2b36e7eb20 Mon Sep 17 00:00:00 2001
From: Alam Guardin <alamguardin@gmail.com>
Date: Tue, 6 Aug 2024 21:33:24 -0500
Subject: style: create link component

---
 src/components/Link.astro | 49 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/components/Link.astro

(limited to 'src/components/Link.astro')

diff --git a/src/components/Link.astro b/src/components/Link.astro
new file mode 100644
index 0000000..efd75f6
--- /dev/null
+++ b/src/components/Link.astro
@@ -0,0 +1,49 @@
+<a href="#" 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>
+    </span>
+    <div class="link-content">
+        <h2 class="link-title">Lorem Insup dolor sit ammet</h2>
+        <p class="link-description">Other description link</p>
+    </div>
+</a>
+
+<style>
+    .link {
+        padding: 0.75rem;
+        display: flex;
+        border: 1px solid var(--zinc-800);
+        border-radius: 1rem;
+        text-decoration: none;
+    }
+
+    .link-icon {
+        width: 3rem;
+        height: 3rem;
+        margin-right: 1.125rem;
+        background: var(--zinc-900);
+        border-radius: 0.5rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;   
+    }
+
+    .link-icon svg {
+        width: 1.5rem;
+        fill: var(--zinc-50)
+    }
+
+    .link-title, .link-description {
+        font-size: 1rem;
+    }
+
+    .link-title {
+        color: var(--zinc-50);
+        font-weight: normal;
+    }
+
+    .link-description {
+        color: var(--zinc-400);
+        margin-top: 0.125rem;
+    }
+</style>
\ No newline at end of file
-- 
cgit v1.2.3