expria-frontend/src/features/simulations/components/rapport/ConseilNclcCallout.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

42 lines
1.5 KiB
TypeScript

/**
* ConseilNclcCallout — Sprint 3.6b.
*
* Section "Plan d'action NCLC" : écart au NCLC cible + action prioritaire.
* Visible pour tous les plans.
*
* Règle L : tokens Direction H exclusivement.
*/
import ReactMarkdown from 'react-markdown'
import { Card } from '@/shared/ui/Card'
import type { ConseilNclc } from '@/entities/report/types'
interface Props {
conseil: ConseilNclc
}
export function ConseilNclcCallout({ conseil }: Props) {
return (
<section aria-label="Plan d'action NCLC">
<h2 className="mb-3 text-base font-semibold text-ink-1">Plan d'action NCLC</h2>
<Card variant="raised" className="space-y-3 p-4">
<div className="flex flex-wrap items-baseline gap-x-4 gap-y-1">
<p className="text-[11px] font-semibold uppercase tracking-widest text-ink-5">Objectif</p>
<p className="text-sm font-semibold text-ink-1">{conseil.nclc_cible}</p>
<p className="text-[11px] font-semibold uppercase tracking-widest text-ink-5">Écart</p>
<p className="text-sm text-ink-2">{conseil.ecart}</p>
</div>
<div className="space-y-1.5 rounded-md border border-expria/30 bg-expria-50 p-3">
<p className="text-[11px] font-semibold uppercase tracking-widest text-expria">
Action prioritaire
</p>
<div className="text-sm leading-relaxed text-ink-1">
<ReactMarkdown disallowedElements={['script', 'iframe']}>
{conseil.action_prioritaire}
</ReactMarkdown>
</div>
</div>
</Card>
</section>
)
}