74 lines
2.8 KiB
TypeScript
74 lines
2.8 KiB
TypeScript
import { Link } from '@inertiajs/react';
|
|
|
|
export type EducationalArticle = {
|
|
title: string;
|
|
href: string;
|
|
summary: string;
|
|
author?: string;
|
|
image: { href: string; alt: string } | null;
|
|
opportunities_href?: string | null;
|
|
opportunities_label?: string | null;
|
|
has_opportunities?: boolean;
|
|
};
|
|
|
|
export default function EducationalArticleCard({
|
|
article,
|
|
}: {
|
|
article: EducationalArticle;
|
|
}) {
|
|
const focus =
|
|
'focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-emerald-800';
|
|
return (
|
|
<article className="flex min-w-0 flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white text-slate-900 shadow-sm">
|
|
{article.image && (
|
|
<img
|
|
className="aspect-[16/9] w-full object-cover"
|
|
src={article.image.href}
|
|
alt={article.image.alt}
|
|
loading="lazy"
|
|
width={800}
|
|
height={450}
|
|
/>
|
|
)}
|
|
<div className="flex flex-1 flex-col items-start gap-4 p-5 sm:p-6">
|
|
<p className="text-sm font-medium text-emerald-800">
|
|
Guia sectorial
|
|
</p>
|
|
<h3 className="text-2xl leading-tight font-bold">
|
|
<Link href={article.href} className={focus}>
|
|
{article.title}
|
|
</Link>
|
|
</h3>
|
|
{article.summary && (
|
|
<p className="text-base leading-relaxed text-slate-700">
|
|
{article.summary}
|
|
</p>
|
|
)}
|
|
{article.author && (
|
|
<p className="text-sm text-slate-600">
|
|
Por {article.author}
|
|
</p>
|
|
)}
|
|
<div className="mt-auto flex flex-wrap items-center gap-x-5 gap-y-3 pt-2">
|
|
<Link
|
|
href={article.href}
|
|
className={`inline-flex min-h-11 items-center rounded-lg bg-emerald-900 px-5 py-3 font-semibold text-white hover:bg-emerald-800 ${focus}`}
|
|
>
|
|
Ler o guia
|
|
</Link>
|
|
{article.has_opportunities &&
|
|
article.opportunities_href && (
|
|
<Link
|
|
href={article.opportunities_href}
|
|
className={`inline-flex min-h-11 items-center py-2 font-semibold text-emerald-900 underline underline-offset-4 ${focus}`}
|
|
>
|
|
{article.opportunities_label ??
|
|
'Ver oportunidades'}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|