expria-frontend/src/features/simulations/components/SujetDisplay.tsx
Hermann_Kitio 99617f117c style: prettier format
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-23 03:17:16 +03:00

63 lines
2.1 KiB
TypeScript

/**
* Affichage du sujet d'examen (consigne + documents) — purement présentationnel.
*
* Depuis la refonte /sujets (2026-04-21), le choix du sujet se fait sur une
* page dédiée (SujetsPage). Ce composant n'affiche que le sujet sélectionné.
*
* Le contenu est admin-curé (pas du texte IA) → plain-text avec whitespace-pre-wrap,
* pas de react-markdown.
*
* Règle H : purement présentationnel — le sujet vient du parent.
* Règle L : tokens Direction H exclusivement.
*/
import { Badge } from '@/shared/ui/Badge'
import { Card } from '@/shared/ui/Card'
import type { SujetData } from '@/entities/production/types'
interface Props {
sujet: SujetData | null
}
function DocumentBlock({ titre, texte }: { titre: string | null; texte: string | null }) {
if (!titre && !texte) return null
return (
<article className="rounded-md border border-line bg-canvas-2 p-3">
{titre && <h4 className="mb-2 text-sm font-semibold text-ink-1">{titre}</h4>}
{texte && <p className="whitespace-pre-wrap text-sm leading-relaxed text-ink-2">{texte}</p>}
</article>
)
}
export function SujetDisplay({ sujet }: Props) {
if (!sujet) return null
return (
<Card variant="default" className="p-5">
<div className="space-y-4">
{sujet.role && (
<div className="flex items-center gap-2">
<Badge variant="neutral">Rôle</Badge>
<span className="text-sm text-ink-2">{sujet.role}</span>
</div>
)}
{sujet.contexte && (
<p className="whitespace-pre-wrap text-sm leading-relaxed text-ink-3">{sujet.contexte}</p>
)}
<div>
<h3 className="mb-1 text-xs font-semibold uppercase tracking-wide text-ink-4">
Consigne
</h3>
<p className="whitespace-pre-wrap text-base leading-relaxed text-ink-1">
{sujet.consigne}
</p>
</div>
<DocumentBlock titre={sujet.doc1_titre} texte={sujet.doc1_texte} />
<DocumentBlock titre={sujet.doc2_titre} texte={sujet.doc2_texte} />
</div>
</Card>
)
}