Files
lensflix/components/InfoCard.tsx
T
2026-06-17 20:35:57 +02:00

35 lines
1011 B
TypeScript

"use client";
import { cn } from "@/lib/utils";
import type { CardMeta } from "@/lib/cards";
interface InfoCardProps {
meta: CardMeta;
selected: boolean;
onClick: () => void;
}
export function InfoCard({ meta, selected, onClick }: InfoCardProps) {
return (
<button
type="button"
onClick={onClick}
className={cn(
"group rounded-2xl border p-5 text-left transition",
selected
? "border-amber-400 bg-amber-50 shadow-sm"
: "border-stone-200 bg-white hover:border-stone-300 hover:bg-stone-50",
)}
>
<div className="mb-2 flex items-center gap-2">
<h3 className="font-medium text-stone-950">{meta.title}</h3>
{meta.badge ? (
<span className="rounded-full bg-emerald-100 px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide text-emerald-700">
{meta.badge}
</span>
) : null}
</div>
<p className="text-sm text-stone-600">{meta.subtitle}</p>
</button>
);
}