45 lines
1.6 KiB
JavaScript
45 lines
1.6 KiB
JavaScript
import React from 'react'
|
|
|
|
function formatDate(dateStr) {
|
|
if (!dateStr) return ''
|
|
try {
|
|
return new Date(dateStr).toLocaleDateString('en-US', {
|
|
year: 'numeric', month: 'short', day: 'numeric',
|
|
})
|
|
} catch {
|
|
return ''
|
|
}
|
|
}
|
|
|
|
export default function HomeNews({ items }) {
|
|
if (!Array.isArray(items) || items.length === 0) return null
|
|
|
|
return (
|
|
<section className="mt-14 px-4 sm:px-6 lg:px-8">
|
|
<div className="mb-5 flex items-center justify-between">
|
|
<h2 className="text-xl font-bold text-white">News & Updates</h2>
|
|
<a href="/news" className="text-sm text-nova-300 hover:text-white transition">
|
|
All news →
|
|
</a>
|
|
</div>
|
|
|
|
<div className="divide-y divide-nova-800 overflow-hidden rounded-[24px] border border-white/10 bg-panel">
|
|
{items.map((item) => (
|
|
<a
|
|
key={item.id}
|
|
href={item.url}
|
|
className="grid gap-3 px-5 py-4 transition hover:bg-nova-800 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start"
|
|
>
|
|
<div className="min-w-0">
|
|
{item.eyebrow ? <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-nova-300">{item.eyebrow}</div> : null}
|
|
<div className="mt-1 text-sm font-medium text-white line-clamp-2">{item.title}</div>
|
|
{item.excerpt ? <p className="mt-2 text-sm leading-6 text-soft line-clamp-2">{item.excerpt}</p> : null}
|
|
</div>
|
|
{item.date ? <span className="flex-shrink-0 text-xs text-soft">{formatDate(item.date)}</span> : null}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|