analytica-frontend-lib/dist/chunk-6WVHF7N3.mjs.map

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

{"version":3,"sources":["../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\nimport Text from '../Text/Text';\nimport Button from '../Button/Button';\n\nexport interface EmptyStateProps {\n  /**\n   * Image source for the illustration (optional)\n   * Can be a string (URL) or a ReactNode (component)\n   */\n  image?: string | ReactNode;\n  /**\n   * Title text to display\n   * @default \"Nenhum dado disponível\"\n   */\n  title?: string;\n  /**\n   * Description text to display below the title\n   * @default \"Não há dados para exibir no momento.\"\n   */\n  description?: string;\n  /**\n   * Button text (optional - if not provided, button won't be displayed)\n   */\n  buttonText?: string;\n  /**\n   * Icon to display on the left side of the button\n   */\n  buttonIcon?: ReactNode;\n  /**\n   * Callback function when button is clicked\n   */\n  onButtonClick?: () => void;\n  /**\n   * Button variant\n   * @default \"solid\"\n   */\n  buttonVariant?: 'solid' | 'outline' | 'link';\n  /**\n   * Button action color\n   * @default \"primary\"\n   */\n  buttonAction?: 'primary' | 'positive' | 'negative';\n  /**\n   * Text size variant\n   * @default \"large\"\n   */\n  size?: 'compact' | 'large';\n}\n\n/**\n * Component displayed when there is no data to show (empty state)\n * Shows an illustration with customizable title, description, and optional button in horizontal layout\n *\n * @example\n * ```tsx\n * import { EmptyState } from 'analytica-frontend-lib';\n * import activityImage from './assets/activity.png';\n * import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus';\n *\n * // Large variant (default) - for main page empty states\n * <EmptyState\n *   image={activityImage}\n *   title=\"Incentive sua turma ao aprendizado\"\n *   description=\"Crie uma nova atividade e ajude seus alunos a colocarem o conteúdo em prática!\"\n *   buttonText=\"Criar atividade\"\n *   buttonIcon={<PlusIcon size={18} />}\n *   buttonVariant=\"outline\"\n *   onButtonClick={handleCreateActivity}\n * />\n *\n * // Compact variant - for inline/contextual empty states\n * <EmptyState\n *   image={activityImage}\n *   title=\"Nenhum resultado encontrado\"\n *   description=\"Utilize o filtro ao lado para encontrar questões.\"\n *   size=\"compact\"\n * />\n * ```\n */\nconst EmptyState = ({\n  image,\n  title,\n  description,\n  buttonText,\n  buttonIcon,\n  onButtonClick,\n  buttonVariant = 'solid',\n  buttonAction = 'primary',\n  size = 'large',\n}: EmptyStateProps) => {\n  const displayTitle = title || 'Nenhum dado disponível';\n  const displayDescription =\n    description || 'Não há dados para exibir no momento.';\n\n  const titleClassName =\n    size === 'compact'\n      ? 'text-text-600 text-sm font-semibold text-center'\n      : 'text-text-950 text-3xl font-semibold text-center';\n\n  const descriptionClassName =\n    size === 'compact'\n      ? 'text-text-600 text-sm font-normal text-center'\n      : 'text-text-600 text-[18px] font-normal text-center';\n\n  const containerMinHeight = size === 'compact' ? 'min-h-0' : 'min-h-[705px]';\n\n  return (\n    <div\n      className={`flex flex-col justify-center items-center gap-6 w-full ${containerMinHeight} bg-background rounded-xl p-6`}\n    >\n      {/* Illustration */}\n      {image && (\n        <div className=\"max-w-[170px] max-h-[150px] flex items-center justify-center\">\n          {typeof image === 'string' ? (\n            <img\n              src={image}\n              alt={displayTitle}\n              className=\"w-full h-full max-w-[170px] max-h-[150px]\"\n            />\n          ) : (\n            <div className=\"w-[170px] h-[150px] flex items-center justify-center\">\n              {image}\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* Text Content Container */}\n      <div className=\"flex flex-col items-center gap-4 w-full max-w-[600px] px-6\">\n        {/* Title */}\n        <Text as=\"h2\" className={titleClassName}>\n          {displayTitle}\n        </Text>\n\n        {/* Description */}\n        <Text className={descriptionClassName}>{displayDescription}</Text>\n      </div>\n\n      {/* Button */}\n      {buttonText && onButtonClick && (\n        <Button\n          variant={buttonVariant}\n          action={buttonAction}\n          size=\"large\"\n          onClick={onButtonClick}\n          iconLeft={buttonIcon}\n          className=\"rounded-full px-5 py-2.5\"\n        >\n          {buttonText}\n        </Button>\n      )}\n    </div>\n  );\n};\n\nexport default EmptyState;\n"],"mappings":";;;;;;;;AAkHY,cAcN,YAdM;AAnCZ,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,OAAO;AACT,MAAuB;AACrB,QAAM,eAAe,SAAS;AAC9B,QAAM,qBACJ,eAAe;AAEjB,QAAM,iBACJ,SAAS,YACL,oDACA;AAEN,QAAM,uBACJ,SAAS,YACL,kDACA;AAEN,QAAM,qBAAqB,SAAS,YAAY,YAAY;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,0DAA0D,kBAAkB;AAAA,MAGtF;AAAA,iBACC,oBAAC,SAAI,WAAU,gEACZ,iBAAO,UAAU,WAChB;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAK;AAAA,YACL,WAAU;AAAA;AAAA,QACZ,IAEA,oBAAC,SAAI,WAAU,wDACZ,iBACH,GAEJ;AAAA,QAIF,qBAAC,SAAI,WAAU,8DAEb;AAAA,8BAAC,gBAAK,IAAG,MAAK,WAAW,gBACtB,wBACH;AAAA,UAGA,oBAAC,gBAAK,WAAW,sBAAuB,8BAAmB;AAAA,WAC7D;AAAA,QAGC,cAAc,iBACb;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,QAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAS;AAAA,YACT,UAAU;AAAA,YACV,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}