57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import Card from '@/components/site/card';
|
|
import Icon from '@/components/site/icon';
|
|
|
|
type StepCardProps = {
|
|
step: string;
|
|
title: string;
|
|
description: string;
|
|
icon?: string;
|
|
/** Duration or phase label shown next to the number. */
|
|
badge?: string;
|
|
footer?: { icon: string; label: string };
|
|
};
|
|
|
|
export default function StepCard({
|
|
step,
|
|
title,
|
|
description,
|
|
icon,
|
|
badge,
|
|
footer,
|
|
}: StepCardProps) {
|
|
return (
|
|
<Card interactive className="flex flex-col justify-between">
|
|
<div>
|
|
<div className="flex items-center justify-between pb-5">
|
|
<span className="font-display text-headline-xl text-outline-variant group-hover:text-primary font-extrabold transition-colors">
|
|
{step}
|
|
</span>
|
|
{badge && (
|
|
<span className="bg-surface-container text-primary rounded px-2.5 py-1 font-mono text-[11px] font-semibold">
|
|
{badge}
|
|
</span>
|
|
)}
|
|
{icon && !badge && (
|
|
<Icon
|
|
name={icon}
|
|
className="text-on-surface-variant text-2xl"
|
|
/>
|
|
)}
|
|
</div>
|
|
<h3 className="font-display text-on-surface pb-2 text-lg font-bold">
|
|
{title}
|
|
</h3>
|
|
<p className="text-on-surface-variant text-sm leading-relaxed">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
{footer && (
|
|
<div className="border-outline-variant/30 text-on-surface-variant mt-6 flex items-center gap-2 border-t pt-5 font-mono text-[11px] uppercase">
|
|
<Icon name={footer.icon} className="text-primary text-sm" />
|
|
{footer.label}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|