60 lines
1.3 KiB
JavaScript
60 lines
1.3 KiB
JavaScript
import { classNames } from "@astra-utils/helpers";
|
|
|
|
const PromoCard = ({
|
|
className = "",
|
|
id,
|
|
icon,
|
|
title,
|
|
description,
|
|
linkHRef,
|
|
linkText,
|
|
children,
|
|
}) => {
|
|
return (
|
|
<section aria-labelledby={`section-${id}-title`}>
|
|
<h2 className="sr-only" id={`section-${id}-title`}>
|
|
{title}
|
|
</h2>
|
|
<div
|
|
className={classNames(
|
|
"relative box-border rounded-md bg-white shadow-sm overflow-hidden transition hover:shadow-hover",
|
|
className
|
|
)}
|
|
>
|
|
<div className="p-6">
|
|
{/* Card Icon */}
|
|
{icon && <span className="inline-block mb-2">{icon}</span>}
|
|
|
|
{/* Card Title */}
|
|
<h3 className="relative flex items-center text-slate-800 text-base font-semibold pb-2">
|
|
<span className="flex-1">{title}</span>
|
|
</h3>
|
|
|
|
{/* Card Description */}
|
|
{!children && (
|
|
<p className="text-slate-500 text-sm pb-5">
|
|
{description}
|
|
</p>
|
|
)}
|
|
|
|
{/* Card Content */}
|
|
{children}
|
|
|
|
{/* Card Link */}
|
|
{linkText && (
|
|
<a
|
|
className="text-sm text-astra focus:text-astra focus-visible:text-astra-hover active:text-astra-hover hover:text-astra-hover no-underline"
|
|
href={linkHRef}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{linkText}
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default PromoCard;
|