Now starting with real commit messages

app/articles/[categoryName]/page.tsx

@@ -1,3 +1,88 @@
-export default function Category() {
-	return <h1>List all articles in a category</h1>;
+import styles from "../../../styles/Category.module.scss";
+import Link from "next/link";
+import prisma from "../../../lib/prisma";
+import { Article, Category } from "@prisma/client";
+
+export async function GetAllArticles(category: Category): Promise<Article[]> {
+	return await prisma.article.findMany({ where: { category: category } });
+}
+
+export async function GetPopularArticles(
+	category: Category
+): Promise<Article[]> {
+	return await prisma.article.findMany({
+		where: { category: category },
+		take: 6,
+	});
+}
+
+export async function GetRecentArticles(
+	category: Category
+): Promise<Article[]> {
+	return await prisma.article.findMany({
+		where: { category: category },
+		take: 6,
+		orderBy: { dateCreated: "desc" },
+	});
+}
+
+export async function GetCategory(categoryName: string): Promise<Category> {
+	return await prisma.category.findUnique({ where: { name: categoryName } });
+}
+export default async function CategoryPage({
+	params,
+}: {
+	params: { categoryName: string };
+}) {
+	const categoryName = params.categoryName.toLowerCase().replaceAll("%20", " ");
+	const category: Category = await GetCategory(categoryName);
+	const allArticles: Article[] = await GetAllArticles(category);
+	const popularArticles: Article[] = await GetPopularArticles(category);
+	const recentArticles: Article[] = await GetRecentArticles(category);
+
+	return (
+		<div className={styles.category}>
+			<h1>{category?.title}</h1>
+			<div className={styles.content}>
+				<div className={`${styles.showcase} ${styles.smallShowcase}`}>
+					<h2>Most popular articles</h2>
+					{popularArticles?.map((a, i) => {
+						{
+							return (
+								<Link key={i} href={`/articles/${category.name}/${a.name}`}>
+									{a.name}
+								</Link>
+							);
+						}
+					})}
+				</div>
+
+				{/* <div className={`${styles.showcase} ${styles.smallShowcase}`}>
+					<h2>Most recent articles</h2>
+					{recentArticles?.map((a, i) => {
+						{
+							return (
+								<Link key={i} href={`/articles/${category.name}/${a.name}`}>
+									{a.name}
+								</Link>
+							);
+						}
+					})}
+				</div> */}
+
+				<div className={styles.showcase}>
+					<h2>All articles</h2>
+					{allArticles?.map((a, i) => {
+						{
+							return (
+								<Link key={i} href={`/articles/${category.name}/${a.name}`}>
+									{a.name}
+								</Link>
+							);
+						}
+					})}
+				</div>
+			</div>
+		</div>
+	);
 }