AfiS-Aktensystem/web/components/StampMark.tsx

const STAMP_COLOR: Record<number, string> = {
  0: 'var(--color-stamp-0)',
  1: 'var(--color-stamp-1)',
  2: 'var(--color-stamp-2)',
  3: 'var(--color-stamp-3)',
  4: 'var(--color-stamp-4)',
  5: 'var(--color-stamp-5)',
}

export function stampColor(level: number): string {
  return STAMP_COLOR[level] ?? STAMP_COLOR[0]!
}

/**
 * Die Farbmarken, die aus der Datenbank kommen duerfen.
 *
 * `ClearanceLevelConfig.colorToken` und `PersonnelStatusTag.colorToken` sind
 * Daten und im Adminbereich pflegbar. Sie landen als Name einer CSS-Variablen
 * in einem `style`-Attribut, und was aus der Datenbank in ein Stilattribut
 * geht, wird geprueft - nicht weil es heute jemand setzen koennte, sondern
 * weil es morgen jemand koennen soll. Ein unbekannter Wert faellt auf die
 * neutrale Marke zurueck, statt eine Variable zu erfinden, die es nicht gibt.
 */
export const COLOR_TOKENS = [
  'stamp-0',
  'stamp-1',
  'stamp-2',
  'stamp-3',
  'stamp-4',
  'stamp-5',
] as const

export type ColorToken = (typeof COLOR_TOKENS)[number]

export function colorVariable(token: string | null | undefined): string {
  const erlaubt = (COLOR_TOKENS as readonly string[]).includes(token ?? '')
  return `var(--color-${erlaubt ? token : 'stamp-0'})`
}

/**
 * Stempelmarke oben rechts am Objekt. Der Stempelcharakter kommt aus dem
 * schmalen Schnitt, der Rahmenlinie und der Farbe, nicht aus Grossbuchstaben.
 * Die Stufe steht zusaetzlich als Text, nicht nur als Farbe.
 *
 * **Feste Breite.** Die Namen der Stufen sind unterschiedlich lang und im
 * Adminbereich aenderbar; unterschiedlich breite Marken untereinander lesen
 * sich als Unordnung, nicht als Unterschied. Ein zu langer Name wird gekuerzt,
 * die Stufenziffer davor bleibt immer stehen - sie ist die eigentliche
 * Auskunft.
 *
 * `name` kommt aus ClearanceLevelConfig und ist im Adminbereich aenderbar,
 * deshalb wird er hereingereicht statt aus lib/i18n/de.ts gelesen.
 */
export function StampMark({ level, name }: { level: number; name: string }) {
  return (
    <span
      className="stamp-mark"
      style={{ borderColor: stampColor(level), color: stampColor(level) }}
    >
      <span aria-hidden className="font-mono">
        {level}
      </span>
      <span className="stamp-name">{name}</span>
    </span>
  )
}

/** Die 3 px breite Klassifizierungskante links am Objekt. */
export function classificationEdgeStyle(level: number): React.CSSProperties {
  return { borderLeft: `var(--spacing-edge) solid ${stampColor(level)}` }
}