expria-frontend/src/features/simulations/components/SujetCard.tsx

31 lines
972 B
TypeScript

/**
* Carte cliquable pour un sujet dans la grille /sujets.
*
* Rendu : consigne tronquée sur 3 lignes (line-clamp-3) + badge rôle si présent.
* Règle H : purement présentationnel — l'action vient du parent.
* Règle L : tokens Direction H via la primitive Card (variant interactive).
*/
import { Badge } from '@/shared/ui/Badge'
import { Card } from '@/shared/ui/Card'
import type { SujetData } from '@/entities/production/types'
interface Props {
sujet: SujetData
onSelect: (sujet: SujetData) => void
}
export function SujetCard({ sujet, onSelect }: Props) {
return (
<Card variant="interactive" onClick={() => onSelect(sujet)}>
<div className="flex h-full flex-col gap-3 p-4 text-left">
{sujet.role && (
<div>
<Badge variant="neutral">{sujet.role}</Badge>
</div>
)}
<p className="line-clamp-3 text-sm leading-relaxed text-ink-1">{sujet.consigne}</p>
</div>
</Card>
)
}