Render article

frontend/components/article.tsx

@@ -0,0 +1,66 @@
+import Image from "next/image";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { CalendarIcon } from "lucide-react";
+import { Blog } from "@/types/types";
+
+const BlogArticle: React.FC<{ blog: Blog }> = ({ blog }) => {
+	return (
+		<article className="mx-auto max-w-3xl px-4 py-8 md:py-12">
+			<div className="space-y-6">
+				<div className="space-y-2">
+					<div className="flex items-center gap-2">
+						<Badge variant="secondary">{blog.category}</Badge>
+						<time className="flex items-center text-sm text-muted-foreground">
+							<CalendarIcon className="mr-1 h-4 w-4" />
+							{new Date(blog.published).toLocaleString()}
+						</time>
+					</div>
+					<h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
+						{blog.title}
+					</h1>
+					{blog.summary && (
+						<p className="text-lg text-muted-foreground">
+							{blog.summary}
+						</p>
+					)}
+				</div>
+
+				<div className="flex items-center gap-3">
+					<Avatar>
+						<AvatarImage
+							src={`https://avatar.vercel.sh/blog.author.userId`}
+							alt={`${blog.author.firstname} ${blog.author.lastname}`}
+						/>
+						<AvatarFallback>
+							{(
+								blog.author.firstname[0] +
+								blog.author.lastname[0]
+							).toUpperCase()}
+						</AvatarFallback>
+					</Avatar>
+					<div>
+						<p className="font-medium">
+							{blog.author.firstname} {blog.author.lastname}
+						</p>
+						<p className="text-sm text-muted-foreground">idk</p>
+					</div>
+				</div>
+
+				<div className="relative aspect-video overflow-hidden rounded-lg">
+					<Image
+						src={blog.image ?? "/placeholder.svg"}
+						alt={blog.title}
+						className="object-cover"
+						fill
+						priority
+					/>
+				</div>
+
+				<div dangerouslySetInnerHTML={{ __html: blog.content }} />
+			</div>
+		</article>
+	);
+};
+
+export default BlogArticle;