hideyoshi-blog/src/app/(pages)/home/page.tsx

import { getArticlesPaginated } from '@/lib/feature/article/article.external';
import { ArticleCard } from '@/ui/components/internal/article-card';
import { ArticleListPagination } from '@/ui/components/internal/article-list-pagination';
import { FileTextIcon } from 'lucide-react';
import { Suspense } from 'react';

const PAGE_SIZE = 9;

const ArticleCardSkeleton = () => (
    <div className='flex flex-col overflow-hidden rounded-xl border border-border bg-card'>
        <div className='aspect-video w-full animate-pulse bg-muted' />
        <div className='flex flex-1 flex-col gap-3 p-5'>
            <div className='h-3 w-24 animate-pulse rounded bg-muted' />
            <div className='space-y-1.5'>
                <div className='h-4 w-full animate-pulse rounded bg-muted' />
                <div className='h-4 w-3/4 animate-pulse rounded bg-muted' />
            </div>
            <div className='flex-1 space-y-1.5'>
                <div className='h-3 w-full animate-pulse rounded bg-muted' />
                <div className='h-3 w-full animate-pulse rounded bg-muted' />
                <div className='h-3 w-2/3 animate-pulse rounded bg-muted' />
            </div>
            <div className='mt-1 h-3 w-16 animate-pulse rounded bg-muted' />
        </div>
    </div>
);

const ArticleListSkeleton = () => (
    <>
        <div className='mb-10 h-4 w-32 animate-pulse rounded bg-muted' />
        <div className='grid gap-6 sm:grid-cols-2 xl:grid-cols-3'>
            {Array.from({ length: PAGE_SIZE }).map((_, i) => (
                <ArticleCardSkeleton key={i} />
            ))}
        </div>
    </>
);

type ArticleListProps = {
    searchParams: Promise<{ page?: string; pageSize?: string }>;
};

const ArticleList = async ({ searchParams }: ArticleListProps) => {
    const { page: pageParam, pageSize: pageSizeParam } = await searchParams;
    const page = Math.max(1, Number(pageParam) || 1);
    const pageSize = Number(pageSizeParam) || PAGE_SIZE;

    const {
        data: articles,
        totalPages,
        total,
    } = await getArticlesPaginated(page, pageSize);

    return (
        <>
            <p className='mb-10 text-muted-foreground'>
                {total === 0
                    ? 'No articles published yet.'
                    : `${total} article${total === 1 ? '' : 's'} published`}
            </p>

            {articles.length === 0 ? (
                <div className='flex min-h-64 flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border text-center'>
                    <FileTextIcon className='size-10 text-muted-foreground/40' />
                    <p className='text-muted-foreground'>
                        No articles yet. Check back soon!
                    </p>
                </div>
            ) : (
                <div className='grid gap-6 sm:grid-cols-2 xl:grid-cols-3'>
                    {articles.map((article) => (
                        <ArticleCard
                            key={article.externalId}
                            article={article}
                        />
                    ))}
                </div>
            )}

            {totalPages > 1 && (
                <div className='mt-12 flex items-center justify-between gap-4'>
                    <p className='text-sm text-muted-foreground'>
                        Page {page} of {totalPages}
                    </p>
                    <ArticleListPagination
                        currentPage={page}
                        totalPages={totalPages}
                    />
                </div>
            )}
        </>
    );
};

type HomeProps = {
    searchParams: Promise<{ page?: string; pageSize?: string }>;
};

const Home = async ({ searchParams }: HomeProps) => {
    return (
        <div className='container mx-auto w-full flex-1 px-4 py-12 md:py-16'>
            <div className='mb-10 border-b border-border pb-8'>
                <p className='mb-1 font-mono text-xs font-medium uppercase tracking-widest text-muted-foreground'>
                    Dev Blog
                </p>
                <h1 className='text-3xl font-bold tracking-tight md:text-4xl'>
                    Latest Articles
                </h1>
            </div>
            <Suspense fallback={<ArticleListSkeleton />}>
                <ArticleList searchParams={searchParams} />
            </Suspense>
        </div>
    );
};

export default Home;