style: create link component

3 files changed, 66 insertions, 1 deletions

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
diff --git a/src/components/List.astro b/src/components/List.astro
new file mode 100644
index 0000000..01998f9
--- /dev/null
+++ b/src/components/List.astro
@@ -0,0 +1,14 @@
+---
+import Link from "./Link.astro";
+---
+
+<div class="list">
+    <Link></Link>
+    <Link></Link>
+    <Link></Link>
+    <Link></Link>
+    <Link></Link>
+    <Link></Link>
+    <Link></Link>
+    <Link></Link>
+</div>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6d91e65..05f6222 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,11 +1,13 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Profile from '../components/Profile.astro';
+import List from '../components/List.astro';
 ---
 
 <Layout title="Welcome to Astro.">
     <main class="container">
         <Profile></Profile>
+        <List></List>
     </main>
 </Layout>
 
@@ -13,7 +15,7 @@ import Profile from '../components/Profile.astro';
 	.container {
         margin: auto;
         max-width: 600px;
-        height: 100vh;
+        height: auto;
         width: 90%;
     }
 </style>