Feature: Difficulty-based style for post item

src/components/LeetCodeDifficulty.astro

@@ -1,9 +1,9 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
-import kebabCase from 'lodash.kebabcase'
 
 export interface Props extends HTMLAttributes<'a' | 'span'> {
   tag?: string
+  href?: string
   difficulty: string
 }
 
@@ -13,7 +13,7 @@ const Tag = tag
 
 const tagProps: Record<string, string> = {}
 if (tag === 'a') {
-  tagProps.href = `/difficulties/${kebabCase(difficulty)}`
+  tagProps.href = props.href!
 }
 
 const difficultyStyleMap: Record<string, string> = {
@@ -40,7 +40,7 @@ const getDifficultyCssClass: (difficulty: string) => string = (
     props.class,
   ]}
 >
-  {difficulty}
+  <slot />
 </Tag>
 
 <style lang="scss">

src/components/post/PostHeader.astro

@@ -17,7 +17,9 @@ const formattedDate = formatDate(pubDate)
 <div class="post-header">
   <h1 class="text-2xl mb-3">{title}</h1>
   <div class="flex justify-center items-center mb-3">
-    <LeetCodeDifficulty difficulty={difficulty} />
+    <LeetCodeDifficulty difficulty={difficulty} href={`/difficulties/${kebabCase(difficulty)}`}>
+      {difficulty}
+    </LeetCodeDifficulty>
   </div>
   <div class="flex flex-row flex-wrap justify-center items-center mb-3">
     {

src/components/post/PostItem.astro

@@ -1,22 +1,24 @@
 ---
 import Icon from '@/components/Icon.astro'
+import LeetCodeDifficulty from '@/components/LeetCodeDifficulty.astro'
 
 export interface Props {
   title: string
   href: string
+  difficulty: string
 }
 
-const { title, href } = Astro.props
+const { title, href, difficulty } = Astro.props
 ---
 
-<a href={href} class="post-item">
+<LeetCodeDifficulty difficulty={difficulty} href={href} class="post-item">
   <div class="flex items-center justify-between">
     <div>
       <h2>{title}</h2>
     </div>
     <span class="px-2"><Icon name="bi:arrow-right" /></span>
   </div>
-</a>
+</LeetCodeDifficulty>
 
 <style lang="scss">
   .post-item {
@@ -28,9 +30,7 @@ const { title, href } = Astro.props
     }
 
     & > div {
-      @apply mx-4 p-4;
-      @apply border-2 border-solid border-style-primary;
-      @apply hover:bg-style-primary text-style-secondary hover:text-style-primary-inverted;
+      @apply mx-4 py-4;
     }
   }
 </style>

src/components/post/PostList.astro

@@ -11,5 +11,13 @@ const { posts = [] } = Astro.props
 ---
 
 <div role="list" class="grid grid-cols-1 gap-4">
-  {posts.map((p) => <PostItem title={`${p.data.title}`} href={`/${p.slug}`} />)}
+  {
+    posts.map((p) => (
+      <PostItem
+        title={p.data.title}
+        href={`/${p.slug}`}
+        difficulty={p.data.difficulty}
+      />
+    ))
+  }
 </div>

src/pages/difficulties/[slug].astro

@@ -44,7 +44,9 @@ const { title, description, author } = siteConfig
     <div class="grid grid-flow-col auto-cols-max gap-2 m-4 justify-center">
       <h1 class="text-style-primary">
         Posts by difficulty:
-        <LeetCodeDifficulty tag="span" difficulty={difficulty} class="mx-2" />
+        <LeetCodeDifficulty tag="span" difficulty={difficulty} class="mx-2">
+          {difficulty}
+        </LeetCodeDifficulty>
       </h1>
     </div>
     <PostList posts={posts} />

src/pages/index.astro

@@ -19,9 +19,15 @@ const posts = await getCollection('leetcode-solutions')
 >
   <main class="mx-auto my-4 p-4 max-w-xl text-site-header-text">
     <div class="grid grid-flow-col auto-cols-max gap-2 m-4 justify-center">
-      <LeetCodeDifficulty difficulty="Easy" />
-      <LeetCodeDifficulty difficulty="Medium" />
-      <LeetCodeDifficulty difficulty="Hard" />
+      <LeetCodeDifficulty difficulty="Easy" href="/difficulties/easy">
+        Easy
+      </LeetCodeDifficulty>
+      <LeetCodeDifficulty difficulty="Medium" href="/difficulties/medium">
+        Medium
+      </LeetCodeDifficulty>
+      <LeetCodeDifficulty difficulty="Hard" href="/difficulties/hard">
+        Hard
+      </LeetCodeDifficulty>
     </div>
     <PostList posts={posts} />
   </main>