58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
import Card from '@/components/site/card';
|
|
import Icon from '@/components/site/icon';
|
|
import IconTile from '@/components/site/icon-tile';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type FeatureCardProps = {
|
|
icon: string;
|
|
title: ReactNode;
|
|
description: ReactNode;
|
|
/** Small label shown opposite the icon, e.g. "01 / JASA RESMI". */
|
|
tag?: string;
|
|
/** Outcome line separated by a divider at the bottom of the card. */
|
|
footer?: string;
|
|
iconTone?: 'soft' | 'solid' | 'neutral';
|
|
className?: string;
|
|
};
|
|
|
|
export default function FeatureCard({
|
|
icon,
|
|
title,
|
|
description,
|
|
tag,
|
|
footer,
|
|
iconTone = 'soft',
|
|
className,
|
|
}: FeatureCardProps) {
|
|
return (
|
|
<Card
|
|
interactive
|
|
className={cn('flex flex-col justify-between', className)}
|
|
>
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<IconTile icon={icon} tone={iconTone} groupHover />
|
|
{tag && (
|
|
<span className="text-primary font-mono text-[11px] font-bold">
|
|
{tag}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<h3 className="font-display text-on-surface 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-highlight mt-4 flex items-center gap-1.5 border-t pt-4 font-mono text-[11px]">
|
|
<Icon name="done" className="text-sm" />
|
|
<span>{footer}</span>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|