Render article

frontend/app/(main)/blogs/[slug]/page.tsx

@@ -1,40 +1,24 @@
 "use server";
 
-import BlogItem, { BlogItemParams } from "@/components/blogItem";
+import BlogArticle from "@/components/article";
+import request from "@/lib/request";
 import { Blog } from "@/types/types";
+import { notFound } from "next/navigation";
 
 export default async function HistoryDetails({
 	params,
 }: {
-	params: Promise<{ blog_id: string }>;
+	params: Promise<{ slug: string }>;
 }) {
-	const { blog_id } = await params;
-	let blog = {};
-	try {
-		const res = await fetch("http://localhost:3001/blogs/" + blog_id, {
-			method: "GET",
-		});
-		blog = await res.json();
-		console.log(blog as Blog);
-	} catch (e) {
-		console.log(e);
+	const { slug } = await params;
+	const blog = await request<Blog>(`/blogs/${slug}`, {
+		csrfToken: false,
+		requiresAuth: false,
+	});
+
+	if (blog.status === "Error" || !blog.data) {
+		return notFound();
 	}
 
-	if (blog == null) {
-		return <>Error</>;
-	}
-
-	const blog_item_params: BlogItemParams = {
-		title_style:
-			"py-12 mb-3 text-pretty text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-3xl",
-		subtitle_style:
-			"py-12 mb-3 text-pretty text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-3xl",
-		p_style:
-			"blog-paragraph mb-5 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg",
-		default_img:
-			"https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
-		blog: blog as Blog,
-	};
-
-	return <BlogItem params={blog_item_params} />;
+	return <BlogArticle blog={blog.data} />;
 }