added seed data; image uploads via server actions; infinite article grid

src/components/article/article-card.tsx

@@ -1,16 +1,49 @@
-import { appRoutes } from "@/config";
+import { appConfig, appRoutes } from "@/config";
 import { Article } from "@/server/db/schema";
 import Link from "next/link";
 import React from "react";
 
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import Avatar from "../avatar";
+import { Icons } from "../icons";
+
 function ArticleCard({
   title,
   slug,
+  author,
   createdAt,
-}: Pick<Article, "title" | "slug" | "createdAt">) {
+}: Pick<Article, "title" | "slug" | "createdAt" | "author">) {
+  const authorName = author?.name ?? `${appConfig.name} Team`;
   return (
     <Link href={appRoutes.article(slug)}>
-      <div className="rounded-md border p-4">{title}</div>
+      <Card className="group flex h-full flex-col justify-between">
+        <CardHeader>
+          <CardTitle>{title}</CardTitle>
+        </CardHeader>
+
+        <CardFooter className="flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            {author ? (
+              <Avatar className="size-6" src={author?.image} fb={authorName} />
+            ) : (
+              <Icons.logo className="size-6 text-muted-foreground transition-colors duration-150 group-hover:text-foreground" />
+            )}
+            <span className="text-sm text-muted-foreground">{authorName}</span>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            {createdAt.toLocaleDateString("de-DE", {
+              dateStyle: "long",
+            })}
+          </p>
+        </CardFooter>
+      </Card>
     </Link>
   );
 }