@amsterdam/design-system-react
Version:
All React components from the Amsterdam Design System. Use it to compose pages in your website or application.
15 lines (14 loc) • 1.28 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* @license EUPL-1.2+
* Copyright Gemeente Amsterdam
*/
import { DocumentIcon } from '@amsterdam/design-system-react-icons';
import clsx from 'clsx';
import { forwardRef } from 'react';
import { Button } from '../Button';
import { Icon } from '../Icon';
import { formatFileSize } from '../common/formatFileSize';
import { formatFileType } from '../common/formatFileType';
export const FileListItem = forwardRef(({ className, file, onDelete, ...restProps }, ref) => (_jsxs("li", { ...restProps, className: clsx('ams-file-list__item', className), ref: ref, children: [_jsx("div", { className: "ams-file-list__item-preview", children: file.type.startsWith('image/') ? (_jsx("img", { alt: file.name, src: URL.createObjectURL(file) })) : (_jsx(Icon, { size: "heading-3", square: true, svg: DocumentIcon })) }), _jsxs("div", { className: "ams-file-list__item-info", children: [file.name, _jsxs("div", { className: "ams-file-input__item-details", children: ["(", formatFileType(file.type), ", ", formatFileSize(file.size), ")"] })] }), onDelete && (_jsx("div", { children: _jsx(Button, { onClick: () => onDelete(), variant: "tertiary", children: "Verwijder" }) }))] })));
FileListItem.displayName = 'FileList.Item';