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

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>
     );
 };