analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1 lines • 2.71 kB
Source Map (JSON)
{"version":3,"sources":["../src/components/LevelBar/LevelBar.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/utils';\n\n/** The prosody scale is always four levels (\"Nível N de 4\"). */\nconst SEGMENTS = 4;\n\nexport interface LevelBarProps extends Omit<\n HTMLAttributes<HTMLDivElement>,\n 'children'\n> {\n /** Reached level, 1-based. Values outside `0..4` are clamped. */\n value: number;\n /** Tailwind background class for the reached segments. */\n colorClass?: string;\n /** Tailwind background class for the remaining segments. */\n trackColorClass?: string;\n}\n\n/**\n * Four-segment level meter: the first `value` segments are filled, the rest\n * stay muted. Used by the reading-fluency results for prosody.\n *\n * The colour is supplied by the consumer because it encodes the reading\n * profile: `bg-indicator-positive` → pré-leitor, `bg-warning-400` → leitor\n * iniciante, `bg-success-400` → leitor fluente.\n *\n * @example\n * ```tsx\n * <LevelBar value={2} colorClass=\"bg-warning-400\" />\n * ```\n */\nexport const LevelBar = ({\n value,\n colorClass = 'bg-success-400',\n trackColorClass = 'bg-background-400',\n className = '',\n ...props\n}: LevelBarProps) => {\n const filled = Math.min(Math.max(Math.trunc(value), 0), SEGMENTS);\n\n return (\n // Decorative: the level is always rendered as adjacent text (\"Nível 2 de\n // 4\"), so announcing the bar too would just repeat it. Wrap it with your\n // own label if you render it without that text.\n <div\n data-component=\"LevelBar\"\n className={cn('flex w-full items-center gap-1', className)}\n aria-hidden=\"true\"\n {...props}\n >\n {Array.from({ length: SEGMENTS }, (_, index) => (\n <span\n key={index}\n data-testid={index < filled ? 'level-bar-filled' : 'level-bar-empty'}\n className={cn(\n 'flex-1 h-1.5 rounded-full',\n index < filled ? colorClass : trackColorClass\n )}\n />\n ))}\n </div>\n );\n};\n\nexport default LevelBar;\n"],"mappings":";;;;;AAmDQ;AA/CR,IAAM,WAAW;AA2BV,IAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,GAAG;AACL,MAAqB;AACnB,QAAM,SAAS,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,KAAK,GAAG,CAAC,GAAG,QAAQ;AAEhE;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA,MAAC;AAAA;AAAA,QACC,kBAAe;AAAA,QACf,WAAW,GAAG,kCAAkC,SAAS;AAAA,QACzD,eAAY;AAAA,QACX,GAAG;AAAA,QAEH,gBAAM,KAAK,EAAE,QAAQ,SAAS,GAAG,CAAC,GAAG,UACpC;AAAA,UAAC;AAAA;AAAA,YAEC,eAAa,QAAQ,SAAS,qBAAqB;AAAA,YACnD,WAAW;AAAA,cACT;AAAA,cACA,QAAQ,SAAS,aAAa;AAAA,YAChC;AAAA;AAAA,UALK;AAAA,QAMP,CACD;AAAA;AAAA,IACH;AAAA;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}