42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { cn } from "@/lib/utils/cn";
|
|
|
|
export function RoleCard({
|
|
icon,
|
|
title,
|
|
description,
|
|
ctaLabel,
|
|
ctaVariant,
|
|
onSelect,
|
|
}: {
|
|
icon: ReactNode;
|
|
title: string;
|
|
description: string;
|
|
ctaLabel: string;
|
|
ctaVariant: "primary" | "secondary";
|
|
onSelect: () => void;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col gap-5 rounded-xl border border-gray-300 bg-gray-50 p-4">
|
|
<div className="flex items-center gap-3">
|
|
<span className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-action/10 text-primary-action">
|
|
{icon}
|
|
</span>
|
|
<h3 className="text-title-large font-extrabold text-foreground">{title}</h3>
|
|
</div>
|
|
<p className="text-body-medium text-gray-700">{description}</p>
|
|
<button
|
|
type="button"
|
|
onClick={onSelect}
|
|
className={cn(
|
|
"flex h-12 w-full items-center justify-center rounded-full text-body-large font-semibold transition-colors",
|
|
ctaVariant === "primary"
|
|
? "border-0 bg-primary-action text-white hover:bg-primary-action/90"
|
|
: "border border-primary-action bg-white text-primary-action hover:bg-primary-action/5",
|
|
)}
|
|
>
|
|
{ctaLabel}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|