Feature: Component LeetCodeDifficulty

package.json

@@ -28,6 +28,7 @@
     "@iconify-json/bi": "^1.1.15",
     "@tailwindcss/typography": "^0.5.9",
     "@types/lodash.get": "^4.4.7",
+    "@types/lodash.kebabcase": "^4.1.7",
     "@types/node": "^18.14.1",
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.53.0",
@@ -38,6 +39,7 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
     "lodash.get": "^4.4.2",
+    "lodash.kebabcase": "^4.1.1",
     "sass": "^1.58.3",
     "tailwindcss-themer": "^3.0.1",
     "typescript": "^4.9.5"

src/components/LeetCodeDifficulty.astro

@@ -0,0 +1,45 @@
+---
+import kebabCase from 'lodash.kebabcase'
+
+export interface Props {
+  difficulty: string
+}
+
+const { difficulty } = Astro.props
+const difficultyStyleMap: Record<string, string> = {
+  Easy: 'difficulty-easy',
+  Medium: 'difficulty-medium',
+  Hard: 'difficulty-hard',
+}
+
+const getDifficultyCssClass: (difficulty: string) => string = (
+  difficulty: string
+) => {
+  return Object.keys(difficultyStyleMap).includes(difficulty)
+    ? difficultyStyleMap[difficulty] || ''
+    : ''
+}
+---
+
+<a
+  href={`/difficulties/${kebabCase(difficulty)}`}
+  class:list={['px-2 py-1', getDifficultyCssClass(difficulty)]}
+>
+  {difficulty}
+</a>
+
+<style lang="scss">
+  $difficulties: 'easy', 'medium', 'hard';
+
+  @each $difficulty in $difficulties {
+    .difficulty-#{$difficulty} {
+      @apply bg-difficulty-#{$difficulty};
+      @apply border-2;
+      @apply border-difficulty-#{$difficulty};
+      @apply text-difficulty-#{$difficulty};
+      @apply hover:bg-transparent;
+      @apply hover:border-difficulty-#{$difficulty}-hover;
+      @apply hover:text-difficulty-#{$difficulty}-hover;
+    }
+  }
+</style>

src/components/post/PostItem.astro

@@ -9,8 +9,8 @@ export interface Props {
 const { title, href } = Astro.props
 ---
 
-<a href={href}>
-  <div class="post-item flex items-center justify-between">
+<a href={href} class="post-item">
+  <div class="flex items-center justify-between">
     <div>
       <h2>{title}</h2>
     </div>
@@ -20,8 +20,17 @@ const { title, href } = Astro.props
 
 <style lang="scss">
   .post-item {
-    @apply mx-3 my-2 p-3;
-    @apply border-2 border-solid border-style-primary;
-    @apply hover:bg-style-primary text-style-secondary hover:text-style-primary-inverted;
+    &:first-child {
+      @apply mt-4;
+    }
+    &:last-child {
+      @apply mb-4;
+    }
+
+    & > 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;
+    }
   }
 </style>

src/components/post/PostList.astro

@@ -4,19 +4,12 @@ import type { CollectionEntry } from 'astro:content'
 import PostItem from '@/components/post/PostItem.astro'
 
 export interface Props {
-  posts: CollectionEntry<any>[];
+  posts: CollectionEntry<any>[]
 }
 
 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}`} />)}
 </div>

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import { getCollection } from 'astro:content'
 
+import LeetCodeDifficulty from '@/components/LeetCodeDifficulty.astro'
 import PostList from '@/components/post/PostList.astro'
 import siteConfig from '@/configs/site'
 import AppLayout from '@/layouts/AppLayout.astro'
@@ -17,6 +18,11 @@ const posts = await getCollection('leetcode-solutions')
   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">
+      <LeetCodeDifficulty difficulty="Easy" />
+      <LeetCodeDifficulty difficulty="Medium" />
+      <LeetCodeDifficulty difficulty="Hard" />
+    </div>
     <PostList posts={posts} />
   </main>
 </AppLayout>

tailwind.config.cjs

@@ -6,7 +6,11 @@ const typography = require('@tailwindcss/typography')
 module.exports = {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        transparent: 'transparent',
+      }
+    },
   },
   plugins: [
     tailwindCssTheme(themeConfig),

theme.config.cjs

@@ -7,8 +7,8 @@ const themeColors = {
     hard: '#ff2d55',
   },
   light: {
-    secondary: colors.zinc['900'],
-    tertiary: colors.zinc['50'],
+    secondary: colors.gray['900'],
+    tertiary: colors.gray['50'],
   },
   dark: {
     secondary: colors.zinc['100'],
@@ -25,6 +25,15 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
     'link-hover': colors.pink['500'],
   }
 
+  const textDifficultyColors = {
+    easy: baseColors['text-inverted'],
+    medium: baseColors['text-inverted'],
+    hard: baseColors['text-inverted'],
+    'easy-hover': themeColors.leetcode.easy,
+    'medium-hover': themeColors.leetcode.medium,
+    'hard-hover': themeColors.leetcode.hard,
+  }
+
   return {
     textColor: {
       style: {
@@ -36,7 +45,10 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
         'title': baseColors.text,
         'header-text': baseColors.text,
         'header-text-hover': baseColors.fill,
-      }
+      },
+      difficulty: {
+        ...textDifficultyColors,
+      },
     },
     backgroundColor: {
       style: {
@@ -48,6 +60,14 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
         'bg': '#1a1a1a',
         'header-bg': '#282828',
       },
+      difficulty: {
+        easy: themeColors.leetcode.easy,
+        'easy-hover': baseColors.text,
+        medium: themeColors.leetcode.medium,
+        'medium-hover': baseColors.text,
+        hard: themeColors.leetcode.hard,
+        'hard-hover': baseColors.text,
+      },
     },
     borderColor: {
       style: {
@@ -57,7 +77,13 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
       },
       site: {
         'header-border': colors.zinc['600'],
-      }
+      },
+      difficulty: {
+        ...themeColors.leetcode,
+        'easy-hover': themeColors.leetcode.easy,
+        'medium-hover': themeColors.leetcode.medium,
+        'hard-hover': themeColors.leetcode.hard,
+      },
     },
   }
 }
@@ -71,6 +97,15 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
     'link-hover': colors.pink['500'],
   }
 
+  const textDifficultyColors = {
+    easy: baseColors.text,
+    medium: baseColors.text,
+    hard: baseColors.text,
+    'easy-hover': themeColors.leetcode.easy,
+    'medium-hover': themeColors.leetcode.medium,
+    'hard-hover': themeColors.leetcode.hard,
+  }
+
   return {
     textColor: {
       style: {
@@ -82,7 +117,10 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
         'title': baseColors['text-inverted'],
         'header-text': baseColors['text-inverted'],
         'header-text-hover': colors.gray['300'],
-      }
+      },
+      difficulty: {
+        ...textDifficultyColors,
+      },
     },
     backgroundColor: {
       style: {
@@ -94,6 +132,14 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
         'bg': colors.white,
         'header-bg': primary,
       },
+      difficulty: {
+        easy: themeColors.leetcode.easy,
+        'easy-hover': baseColors.text,
+        medium: themeColors.leetcode.medium,
+        'medium-hover': baseColors.text,
+        hard: themeColors.leetcode.hard,
+        'hard-hover': baseColors.text,
+      },
     },
     borderColor: {
       style: {
@@ -105,13 +151,19 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
         'header-border': primary,
       }
     },
+    difficulty: {
+      ...themeColors.leetcode,
+      'easy-hover': themeColors.leetcode.easy,
+      'medium-hover': themeColors.leetcode.medium,
+      'hard-hover': themeColors.leetcode.hard,
+    },
   }
 }
 
 const siteTheme = ({ primary, secondary, tertiary }, isDark = true) =>
   isDark
     ? darkTheme({ primary, secondary, tertiary })
-    : lightTheme(darkTheme({ primary, secondary, tertiary }))
+    : lightTheme({ primary, secondary, tertiary })
 
 module.exports = {
   defaultTheme: {
@@ -129,6 +181,6 @@ module.exports = {
         secondary: themeColors.light['secondary'],
         tertiary: themeColors.light['tertiary'],
       }, false)
-    }
+    },
   ]
 }