Page: /difficulties/{slug}

src/components/LeetCodeDifficulty.astro

@@ -1,11 +1,21 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import kebabCase from 'lodash.kebabcase'
 
-export interface Props {
+export interface Props extends HTMLAttributes<'a' | 'span'> {
+  tag?: string
   difficulty: string
 }
 
-const { difficulty } = Astro.props
+const { difficulty, tag = 'a', ...props } = Astro.props
+
+const Tag = tag
+
+const tagProps: Record<string, string> = {}
+if (tag === 'a') {
+  tagProps.href = `/difficulties/${kebabCase(difficulty)}`
+}
+
 const difficultyStyleMap: Record<string, string> = {
   Easy: 'difficulty-easy',
   Medium: 'difficulty-medium',
@@ -21,12 +31,17 @@ const getDifficultyCssClass: (difficulty: string) => string = (
 }
 ---
 
-<a
-  href={`/difficulties/${kebabCase(difficulty)}`}
-  class:list={['px-2 py-1', getDifficultyCssClass(difficulty)]}
+<Tag
+  {...tagProps}
+  class:list={[
+    'px-2 py-1',
+    getDifficultyCssClass(difficulty),
+    tag === 'a' ? 'link' : '',
+    props.class,
+  ]}
 >
   {difficulty}
-</a>
+</Tag>
 
 <style lang="scss">
   $difficulties: 'easy', 'medium', 'hard';
@@ -37,9 +52,11 @@ const getDifficultyCssClass: (difficulty: string) => string = (
       @apply border-2;
       @apply border-difficulty-#{$difficulty};
       @apply text-difficulty-#{$difficulty};
-      @apply hover:bg-site-bg;
-      @apply hover:border-difficulty-#{$difficulty}-hover;
-      @apply hover:text-difficulty-#{$difficulty}-hover;
+      &.link {
+        @apply hover:bg-site-bg;
+        @apply hover:border-difficulty-#{$difficulty}-hover;
+        @apply hover:text-difficulty-#{$difficulty}-hover;
+      }
     }
   }
 </style>

src/pages/difficulties/[slug].astro

@@ -0,0 +1,52 @@
+---
+import { getCollection } from 'astro:content'
+import kebabCase from 'lodash.kebabcase'
+
+import LeetCodeDifficulty from '@/components/LeetCodeDifficulty.astro'
+import PostList from '@/components/post/PostList.astro'
+import siteConfig from '@/configs/site'
+import AppLayout from '@/layouts/AppLayout.astro'
+
+export async function getStaticPaths() {
+  const allDifficulties = new Set<string>()
+  const allPosts = await getCollection(
+    'leetcode-solutions',
+    ({ data }) => data.difficulty?.length > 0
+  )
+  allPosts.forEach((post) => allDifficulties.add(post.data.difficulty))
+
+  return Array.from(allDifficulties).map((difficulty) => {
+    const slug = kebabCase(difficulty)
+    const filteredPosts = allPosts.filter(
+      (post) => post.data.difficulty === difficulty
+    )
+    return {
+      params: { slug },
+      props: {
+        posts: filteredPosts,
+        difficulty,
+      },
+    }
+  })
+}
+
+const { difficulty, posts } = Astro.props
+const { title, description, author } = siteConfig
+---
+
+<AppLayout
+  title={`${difficulty} - ${title}`}
+  description={description}
+  author={author.name}
+  headerCssClasses="max-w-xl px-8"
+>
+  <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">
+      <h1 class="text-style-primary">
+        Posts by difficulty:
+        <LeetCodeDifficulty tag="span" difficulty={difficulty} class="mx-2" />
+      </h1>
+    </div>
+    <PostList posts={posts} />
+  </main>
+</AppLayout>