59 lines
2.5 KiB
JavaScript
59 lines
2.5 KiB
JavaScript
import React from 'react'
|
|
|
|
export default function HelpTopicCard({ item, links }) {
|
|
const primaryHref = item.primaryLinkKey ? links[item.primaryLinkKey] : null
|
|
const secondaryHref = item.secondaryLinkKey ? links[item.secondaryLinkKey] : null
|
|
|
|
return (
|
|
<article className="rounded-[28px] border border-white/10 bg-black/20 p-5 transition hover:border-white/20 hover:bg-white/[0.05]">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{item.eyebrow}</p>
|
|
<h3 className="mt-2 text-lg font-semibold text-white">{item.title}</h3>
|
|
</div>
|
|
<span className="rounded-full border border-white/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-400">
|
|
{item.status}
|
|
</span>
|
|
</div>
|
|
|
|
<p className="mt-3 text-sm leading-6 text-slate-300">{item.description}</p>
|
|
|
|
{item.plannedPath ? (
|
|
<p className="mt-3 text-xs uppercase tracking-[0.16em] text-slate-500">Planned route: {item.plannedPath}</p>
|
|
) : null}
|
|
|
|
{Array.isArray(item.tags) && item.tags.length > 0 ? (
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
{item.tags.map((tag) => (
|
|
<span key={tag} className="rounded-full border border-white/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-400">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="mt-5 flex flex-wrap gap-3">
|
|
{primaryHref ? (
|
|
<a href={primaryHref} className="rounded-full border border-sky-300/20 bg-sky-300/10 px-4 py-2.5 text-sm font-semibold text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-300/15">
|
|
{item.primaryLabel}
|
|
</a>
|
|
) : null}
|
|
{secondaryHref ? (
|
|
<a href={secondaryHref} className="rounded-full border border-white/10 px-4 py-2.5 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/[0.05]">
|
|
{item.secondaryLabel}
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
|
|
{Array.isArray(item.linkItems) && item.linkItems.length > 0 ? (
|
|
<div className="mt-4 flex flex-wrap gap-3">
|
|
{item.linkItems.map((linkItem) => (
|
|
<a key={linkItem.label} href={links[linkItem.linkKey]} className="text-sm font-semibold text-sky-200 underline underline-offset-4">
|
|
{linkItem.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</article>
|
|
)
|
|
} |