analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1 lines • 4.46 kB
Source Map (JSON)
{"version":3,"sources":["../src/components/shared/StatCard/StatCard.tsx"],"sourcesContent":["import { StarIcon } from '@phosphor-icons/react/dist/csr/Star';\nimport { MedalIcon } from '@phosphor-icons/react/dist/csr/Medal';\nimport { WarningCircleIcon } from '@phosphor-icons/react/dist/csr/WarningCircle';\nimport { InfoIcon } from '@phosphor-icons/react/dist/csr/Info';\nimport type { Icon } from '@phosphor-icons/react';\nimport Text from '../../Text/Text';\nimport { cn } from '../../../utils/utils';\n\n/**\n * Available variants for the StatCard component\n */\nexport type StatVariant = 'score' | 'correct' | 'incorrect' | 'blank';\n\n/**\n * Configuration for each stat card variant\n */\nexport const variantConfig: Record<\n StatVariant,\n {\n bg: string;\n text: string;\n iconBg: string;\n iconColor: string;\n IconComponent: Icon;\n }\n> = {\n score: {\n bg: 'bg-warning-background',\n text: 'text-warning-600',\n iconBg: 'bg-warning-300',\n iconColor: 'text-white',\n IconComponent: StarIcon,\n },\n correct: {\n bg: 'bg-success-200',\n text: 'text-success-700',\n iconBg: 'bg-indicator-positive',\n iconColor: 'text-text-950',\n IconComponent: MedalIcon,\n },\n incorrect: {\n bg: 'bg-error-100',\n text: 'text-error-700',\n iconBg: 'bg-indicator-negative',\n iconColor: 'text-white',\n IconComponent: WarningCircleIcon,\n },\n blank: {\n bg: 'bg-info',\n text: 'text-info-800',\n iconBg: 'bg-indicator-info',\n iconColor: 'text-white',\n IconComponent: InfoIcon,\n },\n};\n\n/**\n * Props for the StatCard component\n */\nexport interface StatCardProps {\n /** Label text displayed above the value */\n label: string;\n /** Value to display (can be string or number) */\n value: string | number;\n /** Visual variant determining colors and icon */\n variant: StatVariant;\n /** Optional additional className */\n className?: string;\n}\n\n/**\n * StatCard component for displaying statistics with an icon\n *\n * Used in activity correction and performance modals to show\n * score, correct answers count, and incorrect answers count.\n *\n * @example\n * ```tsx\n * <StatCard label=\"NOTA\" value=\"8.5\" variant=\"score\" />\n * <StatCard label=\"CORRETAS\" value={10} variant=\"correct\" />\n * <StatCard label=\"INCORRETAS\" value={2} variant=\"incorrect\" />\n * ```\n */\nexport const StatCard = ({\n label,\n value,\n variant,\n className,\n}: StatCardProps) => {\n const config = variantConfig[variant];\n const IconComponent = config.IconComponent;\n\n return (\n <div\n className={cn(\n 'border border-border-50 rounded-xl py-4 px-3 flex flex-col items-center justify-center gap-1',\n config.bg,\n className\n )}\n >\n <div\n className={cn(\n 'w-[30px] h-[30px] rounded-2xl flex items-center justify-center',\n config.iconBg\n )}\n >\n <IconComponent\n size={16}\n className={config.iconColor}\n weight=\"regular\"\n />\n </div>\n <Text\n className={cn('text-2xs font-bold uppercase text-center', config.text)}\n >\n {label}\n </Text>\n <Text className={cn('text-xl font-bold', config.text)}>{value}</Text>\n </div>\n );\n};\n\nexport default StatCard;\n"],"mappings":";;;;;;;;AAAA,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AA0FrB,SAaI,KAbJ;AA7EG,IAAM,gBAST;AAAA,EACF,OAAO;AAAA,IACL,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,eAAe;AAAA,EACjB;AAAA,EACA,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,eAAe;AAAA,EACjB;AAAA,EACA,WAAW;AAAA,IACT,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,eAAe;AAAA,EACjB;AAAA,EACA,OAAO;AAAA,IACL,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,eAAe;AAAA,EACjB;AACF;AA6BO,IAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACnB,QAAM,SAAS,cAAc,OAAO;AACpC,QAAM,gBAAgB,OAAO;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,OAAO;AAAA,QACP;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,OAAO;AAAA,YACT;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,WAAW,OAAO;AAAA,gBAClB,QAAO;AAAA;AAAA,YACT;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,4CAA4C,OAAO,IAAI;AAAA,YAEpE;AAAA;AAAA,QACH;AAAA,QACA,oBAAC,gBAAK,WAAW,GAAG,qBAAqB,OAAO,IAAI,GAAI,iBAAM;AAAA;AAAA;AAAA,EAChE;AAEJ;","names":[]}