ads

app/articles/DynamicCategoryGrid.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import styles from "../../styles/DynamicCategoryGrid.module.scss";
+import Link from "next/link";
+export default function DynamicCategoryGrid({ categories }) {
+	return (
+		<div className={styles.grid}>
+			{categories.map((cat, i) => {
+				{
+					return (
+						<div key={i} className={styles.linkContainer}>
+							<Link href="#" style={{ backgroundColor: cat.color }}>
+								<div className={styles.svgContainer}>
+									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+										<path d={cat.svg} />
+									</svg>
+								</div>
+								{cat.name}
+							</Link>
+						</div>
+					);
+				}
+			})}
+		</div>
+	);
+}

app/articles/page.tsx

@@ -1,3 +1,27 @@
-export default function Article() {
-	return <h1>List all article</h1>;
+import styles from "../../styles/CategoryList.module.scss";
+import Link from "next/link";
+import prisma from "../../lib/prisma";
+import { Category } from "@prisma/client";
+import { Suspense } from "react";
+import dynamic from "next/dynamic";
+
+export async function GetCategories(): Promise<Category[]> {
+	return await prisma.category.findMany();
+}
+
+const DynamicCategoryGrid = dynamic(() => import("./DynamicCategoryGrid"), {
+	loading: () => <p>Loading...</p>,
+});
+
+export default async function CategoryList() {
+	const categories = await GetCategories();
+
+	return (
+		<div className={styles.categoryList}>
+			<h1>Overview</h1>
+			<div className={styles.content}>
+				<DynamicCategoryGrid categories={categories} />
+			</div>
+		</div>
+	);
 }