feat: add table components and admin article list with skeleton loading

src/app/(pages)/admin/article/[externalId]/page.tsx

@@ -0,0 +1,40 @@
+import { getArticleByExternalId } from '@/lib/feature/article/article.external';
+import { UpdateArticleForm } from '@/ui/components/internal/update-article-form';
+import { UUIDv4 } from '@/utils/types/uuid';
+import { ArrowLeftIcon } from 'lucide-react';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+
+interface UpdateArticlePageProps {
+    params: Promise<{ externalId: string }>;
+}
+
+const UpdateArticlePage = async ({ params }: UpdateArticlePageProps) => {
+    const { externalId } = await params;
+
+    const result = await getArticleByExternalId(externalId as UUIDv4);
+    if (!result.ok) throw result.error;
+
+    const article = result.value;
+    if (!article) notFound();
+
+    return (
+        <div className='container mx-auto px-4 py-10 min-h-3/4'>
+            <div className='mb-6'>
+                <Link
+                    href='/admin'
+                    className='inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors'
+                >
+                    <ArrowLeftIcon className='size-4' />
+                    Back to articles
+                </Link>
+            </div>
+            <div className='rounded-lg border border-border p-6'>
+                <h2 className='mb-6 text-2xl font-bold'>Edit Article</h2>
+                <UpdateArticleForm article={article} />
+            </div>
+        </div>
+    );
+};
+
+export default UpdateArticlePage;

src/app/(pages)/admin/article/create/page.tsx

@@ -0,0 +1,14 @@
+import { CreateArticleForm } from '@/ui/components/internal/create-article-form';
+
+const CreateArticlePage = () => {
+    return (
+        <div className='container mx-auto px-4 py-10 min-h-3/4'>
+            <div className='rounded-lg border border-border p-6'>
+                <h2 className='mb-6 text-2xl font-bold'>Create New Article</h2>
+                <CreateArticleForm />
+            </div>
+        </div>
+    );
+};
+
+export default CreateArticlePage;

src/app/(pages)/admin/page.tsx

@@ -1,12 +1,36 @@
-import CreateArticleForm from '@/ui/components/internal/create-article-form';
+import { AdminArticleList } from '@/ui/components/internal/article/admin-article-list';
+import { AdminArticleListSkeleton } from '@/ui/components/internal/article/admin-article-list-skeleton';
+import { Button } from '@/ui/components/shadcn/button';
+import { PlusIcon } from 'lucide-react';
+import Link from 'next/link';
+import { Suspense } from 'react';
 
-const AdminPage = async () => {
+const PAGE_SIZE = 6;
+
+interface AdminPageProps {
+    searchParams: Promise<{ page?: string; pageSize?: string }>;
+}
+
+const AdminPage = async ({ searchParams }: AdminPageProps) => {
     return (
         <div className='container mx-auto px-4 py-10 min-h-3/4'>
-            <div className='rounded-lg border border-border p-6'>
-                <h2 className='mb-6 text-2xl font-bold'>Create New Article</h2>
-                <CreateArticleForm />
+            <div className='mb-8 flex items-center justify-between border-b border-border pb-6'>
+                <h1 className='text-2xl font-bold'>Articles</h1>
+                <Button asChild>
+                    <Link href='/admin/article/create'>
+                        <PlusIcon className='size-4' />
+                        Create Article
+                    </Link>
+                </Button>
             </div>
+            <Suspense
+                fallback={<AdminArticleListSkeleton skeletonSize={PAGE_SIZE} />}
+            >
+                <AdminArticleList
+                    searchParams={searchParams}
+                    defaultPageSize={PAGE_SIZE}
+                />
+            </Suspense>
         </div>
     );
 };

src/app/(pages)/home/page.tsx

@@ -2,16 +2,6 @@ import { ArticleList } from '@/ui/components/internal/article/article-list';
 import { ArticleListSkeleton } from '@/ui/components/internal/article/article-list-skeleton';
 import { Suspense } from 'react';
 
-
-
-
-
-
-
-
-
-
-
 const PAGE_SIZE = 4;
 
 type HomeProps = {