mirror of
https://github.com/siop-spelev/siop2.git
synced 2026-08-08 12:41:54 +00:00
4f3af5af4f
- React 19 + Vite + Tailwind v4 : tokens.css copié tel quel (source de vérité), classes composants extraites de la maquette validée, Manrope auto-hébergée, primitives shadcn-style possédées (Button cva, menu Radix) - connexion fidèle à la maquette ; liste démo affichée seulement si /auth/demo-accounts répond (404 ⇒ rien — ADR-002, l'API seule source) - coquille : sidebar 4 groupes avec rail safran actif (écrans futurs marqués R1-R3), topbar recherche/thème/chip DÉMO + sélecteur de rôle (bascule 101 ms, critère < 3 s) ; page /design = référence vivante des revues pixel - règle d'or : schema.d.ts généré depuis docs/openapi.json et committé (openapi-typescript + openapi-fetch) - tokens.css : tokens --nav-* ajoutés (valeurs de la maquette validée) ; seed réaligné sur les personas de la maquette - vérifié en navigateur réel (Playwright + Chrome headless) : 7 captures, parcours démo complet, bi-thème, zéro erreur console ; typecheck + vitest + build OK Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
43 lines
989 B
TypeScript
43 lines
989 B
TypeScript
import type { RoleName } from '@siop/shared';
|
|
import { cn } from '@/lib/cn';
|
|
|
|
/** Couleur d'avatar par rôle (tokens uniquement — répartition de la maquette). */
|
|
const ROLE_TOKEN: Record<RoleName, string> = {
|
|
Administrateur: 'var(--graf-1)',
|
|
Dispatcher: 'var(--primaire)',
|
|
Technicien: 'var(--graf-3)',
|
|
'Technicien limité': 'var(--st-encours)',
|
|
Gestionnaire: 'var(--graf-4)',
|
|
Demandeur: 'var(--st-annule)',
|
|
'Vue seule': 'var(--safran)',
|
|
};
|
|
|
|
export function Avatar({
|
|
initials,
|
|
roleName,
|
|
className,
|
|
}: {
|
|
initials: string;
|
|
roleName?: RoleName;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<span
|
|
className={cn('avatar', className)}
|
|
style={roleName ? { background: ROLE_TOKEN[roleName] } : undefined}
|
|
aria-hidden="true"
|
|
>
|
|
{initials}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function initialsOf(displayName: string): string {
|
|
return displayName
|
|
.split(/\s+/)
|
|
.filter(Boolean)
|
|
.slice(0, 2)
|
|
.map((w) => w[0]!.toUpperCase())
|
|
.join('');
|
|
}
|