25 lines
1.6 KiB
JavaScript
25 lines
1.6 KiB
JavaScript
import React from 'react'
|
|
|
|
export default function WorldRecapArticleCard({ article }) {
|
|
if (!article?.url) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<section className="mt-10 rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
|
|
<div className="grid gap-5 lg:grid-cols-[minmax(0,1.1fr)_16rem] lg:items-center">
|
|
<div>
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{article.eyebrow || 'Recap article'}</div>
|
|
<h2 className="mt-3 text-2xl font-semibold tracking-[-0.03em] text-white">{article.title}</h2>
|
|
{article.description ? <p className="mt-3 max-w-3xl text-sm leading-7 text-slate-300">{article.description}</p> : null}
|
|
{Array.isArray(article.meta) && article.meta.length > 0 ? <div className="mt-4 flex flex-wrap gap-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{article.meta.map((item) => <span key={item}>{item}</span>)}</div> : null}
|
|
</div>
|
|
<div className="flex flex-col gap-3 lg:items-end">
|
|
{article.image ? <img src={article.image} alt={article.title} className="h-32 w-full rounded-[24px] border border-white/10 object-cover lg:w-56" /> : null}
|
|
<a href={article.url} data-world-event="world_cta_clicked" data-world-section-key="recap_article" data-world-cta-key="recap_article" className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-400/10 px-4 py-2 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15">{article.cta_label || 'Read article'}<i className="fa-solid fa-arrow-right" /></a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|