89 lines
3.3 KiB
TypeScript
89 lines
3.3 KiB
TypeScript
import Image from 'next/image';
|
|
import { Clock } from 'lucide-react';
|
|
import type { BlogPost } from '../types';
|
|
import { formatDate } from '../utils';
|
|
import { BlogBreadcrumbs } from './BlogBreadcrumbs';
|
|
|
|
interface BlogPostHeaderProps {
|
|
post: BlogPost;
|
|
}
|
|
|
|
export const BlogPostHeader = ({ post }: BlogPostHeaderProps) => {
|
|
return (
|
|
<header className="relative overflow-hidden bg-[#0B0F19] text-white pt-12 pb-16 lg:pt-20 lg:pb-24">
|
|
{/* Blur blob decorations */}
|
|
<div className="absolute inset-0 z-0">
|
|
<div className="absolute -top-24 -left-24 w-96 h-96 bg-violet-500/20 rounded-full blur-3xl" />
|
|
<div className="absolute top-1/2 right-0 w-[500px] h-[500px] bg-pink-600/10 rounded-full blur-3xl transform translate-x-1/3 -translate-y-1/2" />
|
|
</div>
|
|
|
|
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="lg:grid lg:grid-cols-12 lg:gap-16 items-center">
|
|
{/* Left column - Content */}
|
|
<div className="lg:col-span-7 mb-12 lg:mb-0">
|
|
<div className="mb-8">
|
|
<BlogBreadcrumbs
|
|
items={[
|
|
{ label: 'Blog', href: '/blog' },
|
|
{ label: post.category },
|
|
{ label: post.title },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 mb-8">
|
|
<span className="inline-flex items-center rounded-full bg-violet-500/20 px-3 py-1 text-xs font-medium text-violet-400 ring-1 ring-inset ring-violet-500/30">
|
|
{post.category}
|
|
</span>
|
|
<span className="text-gray-400 text-sm flex items-center gap-1 ml-2">
|
|
<Clock className="w-4 h-4" />
|
|
{post.readTime}
|
|
</span>
|
|
</div>
|
|
|
|
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight mb-8 leading-tight text-white">
|
|
{post.title}
|
|
</h1>
|
|
|
|
<p className="text-lg sm:text-xl text-gray-300 mb-10 max-w-2xl leading-relaxed">
|
|
{post.description}
|
|
</p>
|
|
|
|
<div className="flex items-center gap-4 border-t border-white/10 pt-8">
|
|
<Image
|
|
src={post.author.avatar}
|
|
alt={post.author.name}
|
|
width={48}
|
|
height={48}
|
|
className="rounded-full ring-2 ring-[#0B0F19] object-cover"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-white text-base">
|
|
{post.author.name}
|
|
</div>
|
|
<div className="text-sm text-gray-400">
|
|
{formatDate(post.date)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right column - Hero image */}
|
|
<div className="lg:col-span-5 relative">
|
|
<div className="relative rounded-xl overflow-hidden shadow-2xl ring-1 ring-white/10 bg-black/40 backdrop-blur-sm">
|
|
<Image
|
|
src={post.heroImage}
|
|
alt={post.title}
|
|
width={800}
|
|
height={600}
|
|
className="w-full h-auto object-cover aspect-[4/3]"
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|