@plteam/chat-ui
Version:
CUI Kit is a free and open-source library for creating AI assistant chat interfaces, built with React, Material UI, and TypeScript
22 lines (21 loc) • 1.41 kB
JavaScript
import React from 'react';
import Stack from '@mui/material/Stack';
import useFilePreviewIcon from './useFilePreviewIcon';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
const FileItem = ({ name, type, error }) => {
const Icon = useFilePreviewIcon(error ? 'error' : type);
const { fileName, fileFormat } = React.useMemo(() => {
const split = name.split('.');
const fileFormat = split.pop()?.toUpperCase();
const fileName = split.join('.');
return { fileName, fileFormat };
}, [name]);
return (React.createElement(Box, { width: '100%', height: '100%' },
React.createElement(Stack, { alignItems: 'start', justifyItems: 'center', paddingTop: 2, paddingLeft: 2, gap: 0.5 },
React.createElement(Typography, { noWrap: true, width: 140, textOverflow: 'ellipsis', fontSize: '0.875rem', fontWeight: 500, sx: { color: error ? "inherit" : undefined } }, fileName),
React.createElement(Stack, { alignItems: 'center', gap: 1, flexDirection: "row" },
React.createElement(Icon, { color: error ? "inherit" : "primary", fontSize: "small" }),
React.createElement(Typography, { noWrap: true, textOverflow: 'ellipsis', width: 120, fontSize: '0.75rem', sx: { color: error ? "inherit" : undefined } }, error || fileFormat)))));
};
export default FileItem;