feat: add createdAt and updatedAt fields to Article model and implement article pagination with new components

src/ui/components/internal/article-card.tsx

@@ -0,0 +1,66 @@
+import { ArticleModel } from '@/lib/feature/article/article.model';
+import { cn } from '@/ui/components/shadcn/lib/utils';
+import { CalendarIcon } from 'lucide-react';
+import Link from 'next/link';
+
+interface ArticleCardProps {
+    article: ArticleModel;
+    className?: string;
+}
+
+const formatDate = (date: Date) =>
+    new Intl.DateTimeFormat('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+    }).format(date);
+
+export const ArticleCard = ({ article, className }: ArticleCardProps) => {
+    return (
+        <Link
+            href={`/article/${article.slug}`}
+            className={cn(
+                'group flex flex-col overflow-hidden rounded-xl border border-border bg-card text-card-foreground transition-all duration-200 hover:border-foreground/20 hover:shadow-md',
+                className
+            )}
+        >
+            <div className='relative aspect-video w-full overflow-hidden bg-muted'>
+                {article.coverImageUrl ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                        src={article.coverImageUrl}
+                        alt={article.title}
+                        className='h-full w-full object-cover transition-transform duration-300 group-hover:scale-105'
+                    />
+                ) : (
+                    <div className='flex h-full items-center justify-center bg-gradient-to-br from-muted to-muted/60'>
+                        <span className='font-mono text-5xl font-bold text-muted-foreground/20'>
+                            {'{ }'}
+                        </span>
+                    </div>
+                )}
+            </div>
+
+            <div className='flex flex-1 flex-col gap-3 p-5'>
+                <div className='flex items-center gap-1.5 text-xs text-muted-foreground'>
+                    <CalendarIcon className='size-3 shrink-0' />
+                    <time dateTime={article.createdAt.toISOString()}>
+                        {formatDate(article.createdAt)}
+                    </time>
+                </div>
+
+                <h2 className='line-clamp-2 text-base font-bold leading-snug tracking-tight transition-colors group-hover:text-primary'>
+                    {article.title}
+                </h2>
+
+                <p className='line-clamp-3 flex-1 text-sm leading-relaxed text-muted-foreground'>
+                    {article.description}
+                </p>
+
+                <span className='mt-1 text-xs font-medium text-foreground/60 underline-offset-4 group-hover:text-primary group-hover:underline'>
+                    Read more →
+                </span>
+            </div>
+        </Link>
+    );
+};