analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1 lines • 3.95 kB
Source Map (JSON)
{"version":3,"sources":["../src/components/ImagePreviewCard/ImagePreviewCard.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { PaperclipIcon } from '@phosphor-icons/react/dist/csr/Paperclip';\nimport { XIcon } from '@phosphor-icons/react/dist/csr/X';\nimport Text from '../Text/Text';\nimport Button from '../Button/Button';\n\nexport interface ImagePreviewCardProps {\n /** URL da imagem a ser exibida */\n imageUrl: string;\n /** Nome do arquivo (exibido no chip abaixo da imagem) */\n fileName: string;\n /** Callback ao remover — se omitido, o X não é renderizado */\n onRemove?: () => void;\n /** Callback ao atualizar — se omitido, o botão de atualizar não é renderizado */\n onUpdate?: () => void;\n /** Label acima do card. Default: \"Imagem\" */\n label?: ReactNode;\n /** Texto do botão de atualizar. Default: \"Atualizar imagem\" */\n updateButtonLabel?: string;\n /** aria-label do botão X de remover. Default: \"Remover imagem\" */\n removeAriaLabel?: string;\n /** Classes adicionais pro container externo */\n className?: string;\n}\n\n/**\n * Card de preview de imagem com chip de nome de arquivo e ação de atualização.\n *\n * Útil em fluxos de upload onde o usuário precisa ver a imagem enviada,\n * remover, e/ou substituir.\n *\n * @example\n * ```tsx\n * <ImagePreviewCard\n * imageUrl={objectUrl}\n * fileName=\"redacao.jpg\"\n * onRemove={() => setFile(null)}\n * onUpdate={() => openFilePicker()}\n * />\n * ```\n */\nconst ImagePreviewCard = ({\n imageUrl,\n fileName,\n onRemove,\n onUpdate,\n label = 'Imagem',\n updateButtonLabel = 'Atualizar imagem',\n removeAriaLabel = 'Remover imagem',\n className = '',\n}: ImagePreviewCardProps) => {\n return (\n <div className={`flex flex-col gap-4 ${className}`}>\n {label && (\n <Text size=\"md\" weight=\"bold\" className=\"text-text-950\">\n {label}\n </Text>\n )}\n\n <div className=\"flex flex-col items-center gap-3 border border-border-200 rounded-xl p-4 bg-background\">\n <img\n src={imageUrl}\n alt={fileName}\n className=\"w-full max-h-80 object-contain rounded-lg\"\n />\n\n <div className=\"flex flex-row items-center gap-2 border border-border-200 rounded-full px-3 py-1.5 bg-secondary-50 max-w-full min-w-0\">\n <PaperclipIcon size={16} className=\"shrink-0 text-text-700\" />\n <Text size=\"sm\" className=\"text-text-800 truncate min-w-0\">\n {fileName}\n </Text>\n {onRemove && (\n <button\n type=\"button\"\n onClick={onRemove}\n aria-label={removeAriaLabel}\n className=\"shrink-0 text-text-700 hover:text-text-950 cursor-pointer\"\n >\n <XIcon size={14} />\n </button>\n )}\n </div>\n\n {onUpdate && (\n <Button variant=\"outline\" size=\"small\" onClick={onUpdate}>\n {updateButtonLabel}\n </Button>\n )}\n </div>\n </div>\n );\n};\n\nexport default ImagePreviewCard;\n"],"mappings":";;;;;;;;AACA,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AAoDd,cAYA,YAZA;AAbR,IAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,YAAY;AACd,MAA6B;AAC3B,SACE,qBAAC,SAAI,WAAW,uBAAuB,SAAS,IAC7C;AAAA,aACC,oBAAC,gBAAK,MAAK,MAAK,QAAO,QAAO,WAAU,iBACrC,iBACH;AAAA,IAGF,qBAAC,SAAI,WAAU,0FACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,KAAK;AAAA,UACL,WAAU;AAAA;AAAA,MACZ;AAAA,MAEA,qBAAC,SAAI,WAAU,yHACb;AAAA,4BAAC,iBAAc,MAAM,IAAI,WAAU,0BAAyB;AAAA,QAC5D,oBAAC,gBAAK,MAAK,MAAK,WAAU,kCACvB,oBACH;AAAA,QACC,YACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,cAAY;AAAA,YACZ,WAAU;AAAA,YAEV,8BAAC,SAAM,MAAM,IAAI;AAAA;AAAA,QACnB;AAAA,SAEJ;AAAA,MAEC,YACC,oBAAC,kBAAO,SAAQ,WAAU,MAAK,SAAQ,SAAS,UAC7C,6BACH;AAAA,OAEJ;AAAA,KACF;AAEJ;AAEA,IAAO,2BAAQ;","names":[]}