File size: 1,752 Bytes
65d68f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | "use client";
/**
* Mode Card Component
* Individual mode selection card with chips and action button
*/
import { ModeCard as ModeCardType } from "./modeSelectionTypes";
interface ModeCardProps {
card: ModeCardType;
onSelect: (mode: ModeCardType["id"]) => void;
}
export function ModeCard({ card, onSelect }: ModeCardProps) {
return (
<button
type="button"
onClick={() => onSelect(card.id)}
aria-label={`Select ${card.title} mode`}
className="group relative w-full max-w-md p-6 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-left transition-all duration-200 hover:border-white/20"
>
<div className="flex items-start justify-between mb-4">
<div className="mb-2 grid h-12 w-12 place-items-center rounded-lg border border-white/10 bg-white/[0.04] text-sm font-bold tracking-tight text-white/72">
{card.icon}
</div>
<div className="text-xs text-white/40 group-hover:text-white/60 transition-colors">
{card.kicker}
</div>
</div>
<h2 className="text-xl font-semibold text-white mb-2">
{card.title}
</h2>
<p className="text-sm text-white/60 mb-4 leading-relaxed">
{card.subtitle}
</p>
<div className="flex flex-wrap gap-2 mb-4">
{card.exampleChips.slice(0, 3).map((chip, index) => (
<span
key={index}
className="text-xs px-3 py-1.5 bg-white/5 text-white/70 rounded-full"
>
{chip}
</span>
))}
</div>
<div className="text-sm text-white/90 font-medium group-hover:text-white transition-colors">
{card.primaryAction} ->
</div>
</button>
);
}
|