analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1 lines • 6.5 kB
Source Map (JSON)
{"version":3,"sources":["../src/components/NotFound/NotFound.tsx"],"sourcesContent":["import { MouseEvent } from 'react';\nimport Text from '../Text/Text';\nimport Button from '../Button/Button';\nimport { cn } from '../../utils/utils';\n\n/**\n * Props interface for the NotFound component\n *\n * @interface NotFoundProps\n * @property {string} [title] - Custom title text (default: \"Página não encontrada\")\n * @property {string} [description] - Custom description text\n * @property {string} [buttonText] - Custom button text (default: \"Voltar\")\n * @property {() => void} [onButtonClick] - Callback function for button click\n * @property {string} [className] - Additional CSS classes for the container\n * @property {'404' | '500' | 'custom'} [errorType] - Type of error to display (default: '404')\n * @property {string} [customErrorCode] - Custom error code when errorType is 'custom'\n */\nexport interface NotFoundProps {\n title?: string;\n description?: string;\n buttonText?: string;\n onButtonClick?: () => void;\n className?: string;\n errorType?: '404' | '500' | 'custom';\n customErrorCode?: string;\n}\n\n/**\n * NotFound component for displaying error pages\n *\n * A reusable component for displaying 404, 500, or custom error pages\n * with configurable content and navigation button.\n *\n * @param {NotFoundProps} props - The component props\n * @returns {JSX.Element} The NotFound component\n *\n * @example\n * ```typescript\n * // Basic 404 page\n * <NotFound onButtonClick={() => navigate('/dashboard')} />\n *\n * // Custom error page\n * <NotFound\n * errorType=\"500\"\n * title=\"Erro interno do servidor\"\n * description=\"Algo deu errado. Tente novamente mais tarde.\"\n * buttonText=\"Tentar novamente\"\n * onButtonClick={() => window.location.reload()}\n * />\n *\n * // Custom error code\n * <NotFound\n * errorType=\"custom\"\n * customErrorCode=\"403\"\n * title=\"Acesso negado\"\n * description=\"Você não tem permissão para acessar esta página.\"\n * />\n * ```\n */\nconst NotFound = ({\n title,\n description,\n buttonText = 'Voltar',\n onButtonClick,\n className = '',\n errorType = '404',\n customErrorCode,\n}: NotFoundProps) => {\n const getErrorCode = () => {\n if (errorType === 'custom') {\n return customErrorCode?.trim() || 'ERROR';\n }\n return errorType;\n };\n\n const getDefaultTitle = () => {\n switch (errorType) {\n case '404':\n return 'Página não encontrada';\n case '500':\n return 'Erro interno do servidor';\n default:\n return 'Erro';\n }\n };\n\n const getDefaultDescription = () => {\n switch (errorType) {\n case '404':\n return 'Oops! A página que você está procurando não existe ou foi removida.';\n case '500':\n return 'Algo deu errado em nossos servidores. Tente novamente mais tarde.';\n default:\n return 'Ocorreu um erro inesperado.';\n }\n };\n\n const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {\n event.preventDefault();\n onButtonClick?.();\n };\n\n const errorTitle = title || getDefaultTitle();\n const errorDescription = description || getDefaultDescription();\n const errorCode = getErrorCode();\n\n return (\n <div\n className={cn(\n 'flex flex-col w-full h-screen items-center justify-center bg-background-50 px-4',\n className\n )}\n >\n <main\n role=\"main\"\n aria-labelledby=\"error-title\"\n aria-describedby=\"error-description\"\n className=\"flex flex-col items-center text-center max-w-md space-y-6\"\n >\n <section aria-label={`Erro ${errorCode}`}>\n {/* Error Code */}\n <div\n className=\"text-8xl font-bold text-primary-300 select-none\"\n aria-label={`Código de erro: ${errorCode}`}\n >\n {errorCode}\n </div>\n\n {/* Main message */}\n <header className=\"space-y-2\">\n <Text\n size=\"xl\"\n weight=\"bold\"\n className=\"text-text-950\"\n id=\"error-title\"\n aria-level={1}\n >\n {errorTitle}\n </Text>\n <Text size=\"md\" className=\"text-text-600\" id=\"error-description\">\n {errorDescription}\n </Text>\n </header>\n\n {/* Back button */}\n {onButtonClick && (\n <nav aria-label=\"Navegação de erro\">\n <Button\n onClick={handleButtonClick}\n variant=\"solid\"\n size=\"medium\"\n className=\"mt-8\"\n aria-describedby=\"error-description\"\n aria-label={`${buttonText}. ${errorDescription}`}\n >\n {buttonText}\n </Button>\n </nav>\n )}\n </section>\n </main>\n </div>\n );\n};\n\nexport default NotFound;\n"],"mappings":";;;;;;;;;;;AAyHU,cAQA,YARA;AA9DV,IAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AACF,MAAqB;AACnB,QAAM,eAAe,MAAM;AACzB,QAAI,cAAc,UAAU;AAC1B,aAAO,iBAAiB,KAAK,KAAK;AAAA,IACpC;AACA,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,MAAM;AAC5B,YAAQ,WAAW;AAAA,MACjB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IACX;AAAA,EACF;AAEA,QAAM,wBAAwB,MAAM;AAClC,YAAQ,WAAW;AAAA,MACjB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IACX;AAAA,EACF;AAEA,QAAM,oBAAoB,CAAC,UAAyC;AAClE,UAAM,eAAe;AACrB,oBAAgB;AAAA,EAClB;AAEA,QAAM,aAAa,SAAS,gBAAgB;AAC5C,QAAM,mBAAmB,eAAe,sBAAsB;AAC9D,QAAM,YAAY,aAAa;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,mBAAgB;AAAA,UAChB,oBAAiB;AAAA,UACjB,WAAU;AAAA,UAEV,+BAAC,aAAQ,cAAY,QAAQ,SAAS,IAEpC;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,cAAY,sBAAmB,SAAS;AAAA,gBAEvC;AAAA;AAAA,YACH;AAAA,YAGA,qBAAC,YAAO,WAAU,aAChB;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,QAAO;AAAA,kBACP,WAAU;AAAA,kBACV,IAAG;AAAA,kBACH,cAAY;AAAA,kBAEX;AAAA;AAAA,cACH;AAAA,cACA,oBAAC,gBAAK,MAAK,MAAK,WAAU,iBAAgB,IAAG,qBAC1C,4BACH;AAAA,eACF;AAAA,YAGC,iBACC,oBAAC,SAAI,cAAW,2BACd;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS;AAAA,gBACT,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,oBAAiB;AAAA,gBACjB,cAAY,GAAG,UAAU,KAAK,gBAAgB;AAAA,gBAE7C;AAAA;AAAA,YACH,GACF;AAAA,aAEJ;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}