@100mslive/roomkit-react
Version:
72 lines (70 loc) • 2.24 kB
JSX
import React from 'react';
import { TrashIcon } from '@100mslive/react-icons';
import { Dialog, Flex, Text } from '../../../';
import { DialogRow } from '../../primitives/DialogContent';
import { PDFHeader } from './pdfHeader';
import { PDFInfo } from './pdfInfo';
import { SubmitPDF } from './submitPdf';
export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
const [fileName, ext] = pdfFile.name.split('.');
return (
<Dialog.Root defaultOpen onOpenChange={onOpenChange}>
<Dialog.Portal>
<Dialog.Overlay />
<Dialog.Content
css={{
w: 'min(420px,80%)',
overflow: 'auto',
p: '$10',
bg: '$surface_dim',
}}
>
<Flex direction="column">
<PDFHeader />
<DialogRow
css={{
fontFamily: '$sans',
bg: '$surface_bright',
r: '$1',
outline: 'none',
border: '1px solid $border_bright',
p: '$4 $6',
minHeight: '$11',
c: '$on_primary_high',
fs: '$md',
w: '100%',
'&:focus': {
boxShadow: '0 0 0 1px $colors$primary_default',
border: '1px solid transparent',
},
mb: 0,
mt: '$6',
}}
>
<Flex direction="row" css={{ flexGrow: '1', maxWidth: '88%' }}>
<Text
css={{
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
}}
>
{fileName}
</Text>
<Text css={{ whiteSpace: 'nowrap' }}>.{ext}</Text>
</Flex>
<TrashIcon
onClick={() => setPDFFile(null)}
style={{
cursor: 'pointer',
}}
/>
</DialogRow>
<PDFInfo />
<SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
</Flex>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
);
};