Checkpoint: Vignettes Veille : Niveau en violet, Territoire en teal, Date en orange. Vignettes AAP : Région en violet, Département en teal, Date de publication en orange. Cohérence visuelle avec la palette de la boîte de dialogue.

This commit is contained in:
Manus
2026-03-16 15:51:59 -04:00
parent 2161dfc8a3
commit ed8af28fce
3 changed files with 18 additions and 8 deletions

View File

@@ -283,21 +283,21 @@ function AAPGridView({ items }: { items: AAPItem[] }) {
<h3 className="font-semibold text-sm text-foreground leading-snug line-clamp-3 mt-2">{item.titre}</h3>
</CardHeader>
<CardContent className="px-4 pb-4 space-y-2">
<div className="flex flex-wrap gap-2">
<div className="flex flex-wrap gap-1.5">
{item.region && (
<span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
<span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-violet-50 text-violet-700 border border-violet-200">
<MapPin size={10} />{item.region}
</span>
)}
{item.departement && (
<span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
<span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-teal-50 text-teal-700 border border-teal-200">
<MapPin size={10} />{item.departement}
</span>
)}
</div>
<div className="flex items-center justify-between pt-1 border-t border-border/50">
<div className="flex items-center justify-between pt-1 border-t border-border/50 flex-wrap gap-1">
{item.datePublication && (
<span className="inline-flex items-center gap-1 text-xs text-muted-foreground/70">
<span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-orange-50 text-orange-700 border border-orange-200">
<Calendar size={10} />
{formatDate(item.datePublication)}
</span>

View File

@@ -452,11 +452,19 @@ function VeilleGridView({ items, onDetail }: { items: VeilleItem[]; onDetail: (i
{item.resume && <p className="text-xs text-muted-foreground line-clamp-3 leading-relaxed">{item.resume}</p>}
<div className="flex flex-wrap gap-1.5 pt-1">
{item.categorie && <span className="inline-flex items-center gap-1 text-xs text-muted-foreground"><Tag size={10} />{item.categorie}</span>}
{item.territoire && <span className="inline-flex items-center gap-1 text-xs text-muted-foreground"><MapPin size={10} />{item.territoire}</span>}
{item.niveau && <span className="inline-flex items-center gap-1 text-xs text-muted-foreground"><Layers size={10} />{item.niveau}</span>}
{item.territoire && (
<span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-teal-50 text-teal-700 border border-teal-200">
<MapPin size={10} />{item.territoire}
</span>
)}
{item.niveau && (
<span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-violet-50 text-violet-700 border border-violet-200">
<Layers size={10} />{item.niveau}
</span>
)}
</div>
{item.datePublication && (
<div className="flex items-center gap-1 text-xs text-muted-foreground/70 pt-1 border-t border-border/50">
<div className="flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-orange-50 text-orange-700 border border-orange-200 mt-1 w-fit">
<Calendar size={10} />
{formatDate(item.datePublication)}
</div>