refactor: restructure articles page and update ArticleList component

app/_features/articles/ArticleList.tsx

@@ -1,3 +1,4 @@
+import { UniversalLink } from "../viewTransition";
 import { ArticleListItem } from "./ArticleListItem";
 import { getArticlesMeta } from "./getArticlesMeta";
 import type { TagEnum } from "./type";
@@ -12,10 +13,16 @@ export const ArticleList = ({ tag }: Props): JSX.Element => {
   const articlesMeta = getArticlesMeta({ tag });
 
   return (
-    <div className="grid gap-12">
-      {articlesMeta.map((article) => (
-        <ArticleListItem key={article.title} {...article} />
-      ))}
+    <div className="blur-enter-content">
+      <UniversalLink href="/" isEnabledUnderline className="text-zinc-700 dark:text-zinc-300">
+        ← Go back
+      </UniversalLink>
+
+      <div className="mt-12 grid gap-6 blur-enter-content enter-step-150">
+        {articlesMeta.map((article) => (
+          <ArticleListItem key={article.title} {...article} />
+        ))}
+      </div>
     </div>
   );
 };

app/_features/articles/ArticleListItem.tsx

@@ -1,8 +1,8 @@
-import { ExternalLinkIcon, Time } from "../../_components";
+import { MoveUpRight } from "lucide-react";
+import { Time } from "../../_components";
 import { format } from "../../_utils";
 import { UniversalLink } from "../viewTransition";
 
-import { Tag } from "./Tag";
 import type { ArticleMeta } from "./type";
 
 type Props = ArticleMeta;
@@ -12,26 +12,22 @@ export const ArticleListItem = ({
   href,
   externalLink,
   publishedAt: _publishedAt,
-  tags,
 }: Props) => {
   const publishedAt = format(_publishedAt);
 
   return (
-    <article className="grid gap-4">
-      <h2 className="text-xl">
-        <UniversalLink href={href} isExternal={externalLink} isEnabledUnderline>
+    <article className="flex gap-2 items-center justify-between">
+      <h2 className="text-base font-normal">
+        <UniversalLink href={href} isExternal={externalLink} isEnabledHoveredUnderline>
           {title}
-          {externalLink && <ExternalLinkIcon />}
+          {externalLink && (
+            <MoveUpRight className="mb-[-3px] ml-0.5 inline-block h-4 w-auto align-top text-zinc-500 dark:text-zinc-400" />
+          )}
         </UniversalLink>
       </h2>
-      <div className="flex justify-between">
-        <div className="flex gap-2">
-          {tags.map((tag) => (
-            <Tag key={tag} tag={tag} />
-          ))}
-        </div>
-        <Time dateTime={publishedAt}>{publishedAt}</Time>
-      </div>
+      <Time dateTime={publishedAt} className="shrink-0">
+        {publishedAt}
+      </Time>
     </article>
   );
 };

app/articles/page.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from "next";
+
+import { ArticleList } from "../_features";
+
+export default function Page() {
+  return (
+    <main className="max-w-3xl mx-auto py-16 md:py-32 px-4 md:px-0">
+      <ArticleList />
+    </main>
+  );
+}
+
+export const metadata: Metadata = {
+  title: "Articles",
+};

app/globals.css

@@ -112,6 +112,10 @@
       animation-delay: calc(var(--enter-initial) + var(--enter-stage) * var(--enter-step));
     }
 
+    .blur-enter-content.enter-step-150 > * {
+      --enter-step: 150ms;
+    }
+
     .blur-enter-content > *:nth-child(1) {
       --enter-stage: 1;
     }