Commit 4b1829c

@@ -1,6 +1,7 @@
 ---
-import PostCard from '@components/widgets/PostCard.astro';
 import { getTimeArchives } from '@utils/content-utils';
+import Timeline from './Timeline.astro';
+import PostCard from './widgets/PostCard.astro';
 
 type AllTimeArchives = Awaited<ReturnType<typeof getTimeArchives>>;
 type YearArchives = AllTimeArchives[number];
@@ -14,34 +15,39 @@ const { group } = Astro.props;
 ---
 
 {
-  Array.isArray(group) ? (
-    group.map((year) => <Astro.self group={year} />)
-  ) : 'year' in group ? (
-    <Fragment>
-      <div class="ml-2 text-2xl font-bold">
-        <a href={`/archives/${group.year}/`}>{group.year}</a>
-      </div>
-      {group.months.map((month) => (
-        <Astro.self group={month} />
-      ))}
-    </Fragment>
-  ) : (
-    <Fragment>
-      <div class="ml-3 text-xl font-bold">{group.month}</div>
-      {group.posts.map((post) => {
-        const data = post.data;
-        return (
-          <PostCard
-            title={data.title}
-            url={'/posts/' + data.abbrlink + '/'}
-            published={data.published}
-            tags={data.tags}
-            category={data.category}
-            cover={data.cover}
-            description={data.description}
-          />
-        );
-      })}
-    </Fragment>
-  )
+  Array.isArray(group)
+    ? group.map((year) => <Astro.self group={year} />)
+    : 'year' in group && (
+        <Fragment>
+          <div class="ml-2 text-3xl font-bold">
+            <a href={`/archives/${group.year}/`}>{group.year}</a>
+          </div>
+          <Timeline items={group.months} class="ml-4">
+            <fragment slot="title">
+              {(monthGroup: MonthArchives) => (
+                <div class="mb-6 ml-6 mt-3 flex items-center justify-between">
+                  <h2 class="text-2xl font-bold">{monthGroup.month}</h2>
+                </div>
+              )}
+            </fragment>
+            <fragment slot="body">
+              {(monthGroup: MonthArchives) => (
+                <div class="ml-4 flex flex-col gap-4">
+                  {monthGroup.posts.map((post) => (
+                    <PostCard
+                      title={post.data.title}
+                      url={`/posts/${post.data.abbrlink}/`}
+                      published={post.data.published}
+                      tags={post.data.tags || []}
+                      category={post.data.category}
+                      cover={post.data.cover}
+                      description={post.data.description}
+                    />
+                  ))}
+                </div>
+              )}
+            </fragment>
+          </Timeline>
+        </Fragment>
+      )
 }