feat(page): update homepage

Author: ansidev

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>