achmad
62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import { getAssetUrl } from '@/lib/directus'
|
|
import type { Article } from '@/lib/types'
|
|
|
|
interface Props {
|
|
article: Article
|
|
}
|
|
|
|
export default function HeroSection({ article }: Props) {
|
|
const href = `/${article.category.slug}/${article.slug}`
|
|
|
|
return (
|
|
<section className="max-w-[1200px] mx-auto px-6 pt-10 pb-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-0 bg-bg-card border border-border rounded-lg overflow-hidden">
|
|
<div className="relative aspect-video lg:aspect-auto lg:min-h-[320px] bg-bg-elevated">
|
|
{article.featured_image ? (
|
|
<Image
|
|
src={getAssetUrl(article.featured_image, { width: 900, quality: 85 })}
|
|
alt={article.title}
|
|
fill
|
|
priority
|
|
className="object-cover"
|
|
sizes="(max-width: 1024px) 100vw, 50vw"
|
|
/>
|
|
) : (
|
|
<div className="absolute inset-0 bg-bg-elevated" />
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-8 flex flex-col justify-center">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<span className="bg-violet text-white text-[9px] font-bold uppercase tracking-widest px-2 py-1 rounded">
|
|
Featured
|
|
</span>
|
|
<span className="text-[10px] font-semibold text-text-muted uppercase tracking-widest">
|
|
{article.category.name}
|
|
</span>
|
|
</div>
|
|
|
|
<h1 className="text-2xl lg:text-3xl font-bold text-text-primary leading-snug mb-4">
|
|
{article.title}
|
|
</h1>
|
|
|
|
{article.excerpt && (
|
|
<p className="text-sm text-text-secondary leading-relaxed mb-6">
|
|
{article.excerpt}
|
|
</p>
|
|
)}
|
|
|
|
<Link
|
|
href={href}
|
|
className="self-start inline-flex items-center gap-2 bg-accent text-black text-sm font-semibold px-5 py-2.5 rounded-sm hover:bg-accent-hover transition-colors"
|
|
>
|
|
Read article →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|