99 lines
3.9 KiB
TypeScript
99 lines
3.9 KiB
TypeScript
import React from 'react'
|
|
import { BookOpen, Clock, Calendar, ArrowRight } from 'lucide-react'
|
|
import { AnimateIn } from '@/components/AnimateIn'
|
|
|
|
interface Article {
|
|
title: string
|
|
category: string
|
|
readTime?: string
|
|
date?: string
|
|
excerpt: string
|
|
content?: string
|
|
}
|
|
|
|
interface BlogListBlockProps {
|
|
badge?: string
|
|
heading: string
|
|
subheading?: string
|
|
readMoreLabel?: string
|
|
articles?: Article[]
|
|
}
|
|
|
|
export function BlogListBlockComponent(props: BlogListBlockProps) {
|
|
const { badge, heading, subheading, articles } = props
|
|
|
|
return (
|
|
<section className="py-24 bg-white border-b-2 border-[#1f1f1f]">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl">
|
|
<AnimateIn direction="up">
|
|
<div className="max-w-3xl mb-14">
|
|
{badge && (
|
|
<div className="inline-block bg-[#FFED00] text-[#1f1f1f] text-xs font-black uppercase tracking-widest px-3 py-1 mb-4 border border-[#1f1f1f]">
|
|
{badge}
|
|
</div>
|
|
)}
|
|
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-black uppercase tracking-tight text-[#1f1f1f]">
|
|
{heading}
|
|
</h2>
|
|
{subheading && (
|
|
<p className="mt-4 text-base text-[#666666] leading-relaxed font-medium">
|
|
{subheading}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</AnimateIn>
|
|
|
|
{articles && articles.length > 0 && (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-stretch">
|
|
{articles.map((art, idx) => (
|
|
<AnimateIn key={idx} delay={idx * 150} direction="up" className="h-full">
|
|
<article
|
|
className="bg-[#f4f4f4] border-2 border-[#1f1f1f] h-full flex flex-col justify-between hover-lift transition-all shadow-xs hover:border-t-8 hover:border-t-[#FFED00]"
|
|
>
|
|
<div className="p-8 space-y-4">
|
|
{/* Top Row: Category Badge & Read Time (No Wrapping / No Overlap) */}
|
|
<div className="flex items-center justify-between gap-3">
|
|
<span className="bg-[#1f1f1f] text-[#FFED00] text-[10px] font-black uppercase tracking-wider px-2.5 py-1">
|
|
{art.category}
|
|
</span>
|
|
{art.readTime && (
|
|
<span className="flex items-center gap-1.5 text-[11px] text-[#666666] font-bold whitespace-nowrap shrink-0">
|
|
<Clock className="h-3.5 w-3.5 text-[#1f1f1f]" />
|
|
<span>{art.readTime}</span>
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<h3 className="text-lg font-black uppercase text-[#1f1f1f] leading-snug">
|
|
{art.title}
|
|
</h3>
|
|
|
|
<p className="text-xs sm:text-sm text-[#555555] leading-relaxed line-clamp-4 font-medium">
|
|
{art.excerpt}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="p-6 bg-[#ebebeb] border-t-2 border-[#1f1f1f] flex items-center justify-between">
|
|
{art.date && (
|
|
<span className="flex items-center gap-1.5 text-xs text-[#777777] font-mono whitespace-nowrap">
|
|
<Calendar className="h-3.5 w-3.5 text-[#1f1f1f]" />
|
|
{art.date}
|
|
</span>
|
|
)}
|
|
{props.readMoreLabel && (
|
|
<div className="text-xs font-black uppercase tracking-wider text-[#1f1f1f] flex items-center gap-1 hover:underline cursor-pointer whitespace-nowrap">
|
|
<span>{props.readMoreLabel}</span>
|
|
<ArrowRight className="h-3.5 w-3.5 text-[#1f1f1f]" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</article>
|
|
</AnimateIn>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|