make sure the features are clickable

skamansam · Apr 28, 2024 · 7dfff07 · 7dfff07
1 parent fe39518
commit 7dfff07
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/components/Feature.astro b/src/components/Feature.astro
@@ -1,13 +1,13 @@
 ---
 import { Icon } from 'astro-icon/components'
 
-const { icon = 'mdi:rocket', title = 'Title' } = Astro.props
+const { icon = 'mdi:rocket', title = 'Title', url = '#' } = Astro.props
 ---
 
 <div class="feature flex flex-col gap-4">
   <Icon name={icon} />
   <div class="content">
-    <h3>{title}</h3>
+    <h3><a href={url}>{title}</a></h3>
     <p>
       <slot>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, corporis.</slot>
     </p>
@@ -52,6 +52,20 @@ const { icon = 'mdi:rocket', title = 'Title' } = Astro.props
       border-radius: 1rem;
       z-index: 0;
     }
+    a {
+      text-decoration: none;
+    }
+
+    a:focus {
+      text-decoration: underline;
+    }
+
+    a::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+
   }
 
   :global(.feature [data-icon]) {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -19,7 +19,7 @@ posts.sort((postA, postB) => postA.data.order < postB.data.order ? -1 : 1)
       <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
         {
           posts.map((post) => (
-            <Feature icon={post.data.icon} title={post.data.title} onClick="window.location.href='{`/posts/${post.slug}`}'">
+            <Feature icon={post.data.icon} title={post.data.title} url={`/posts/${post.slug}`}>
               {post.data.description}
             </Feature>
           ))