88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { format } from "date-fns";
|
|
import { Calendar, Clock, ArrowLeft, User } from "lucide-react";
|
|
|
|
const BlogPost = ({
|
|
post,
|
|
children,
|
|
}: {
|
|
post: any;
|
|
children: React.ReactNode;
|
|
}) => {
|
|
const { title, authorName, image, pubDate, description, authorImage } =
|
|
post.data;
|
|
return (
|
|
<>
|
|
{/* Hero section with gradient background and post info */}
|
|
<section className="pb-8 pt-4">
|
|
<div className="container max-w-4xl">
|
|
<div className="space-y-2 text-center">
|
|
<h1 className="blog-post-title">
|
|
{title}
|
|
</h1>
|
|
<p className="text-muted-foreground mx-auto max-w-2xl text-lg">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mx-auto mt-6 flex max-w-md flex-wrap items-center justify-center gap-6">
|
|
{/* Author info */}
|
|
{authorImage ? (
|
|
<div className="flex items-center gap-3">
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-3">
|
|
<div className="bg-primary/10 text-primary flex h-10 w-10 items-center justify-center rounded-full shadow-sm">
|
|
<User className="h-5 w-5" />
|
|
</div>
|
|
<div className="flex flex-col text-sm">
|
|
<span className="font-medium">
|
|
{authorName || "Anonymous"}
|
|
</span>
|
|
<span className="text-muted-foreground">Author</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Date info */}
|
|
<div className="flex items-center gap-4">
|
|
<div className="text-muted-foreground flex items-center gap-1 text-sm">
|
|
<Calendar className="h-4 w-4" />
|
|
<span>{format(pubDate, "MMMM d, yyyy")}</span>
|
|
</div>
|
|
|
|
<div className="text-muted-foreground flex items-center gap-1 text-sm">
|
|
<Clock className="h-4 w-4" />
|
|
<span>5 min read</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Featured image */}
|
|
{image && (
|
|
<section className="container max-w-5xl py-4">
|
|
<div className="aspect-video w-full overflow-hidden rounded-xl border">
|
|
<img
|
|
src={image}
|
|
alt={title}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Article content */}
|
|
<section className="container my-10 max-w-3xl">
|
|
<article className="prose prose-lg dark:prose-invert prose-headings:font-semibold prose-a:text-primary mx-auto">
|
|
{children}
|
|
</article>
|
|
</section>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export { BlogPost };
|