@nish1896/rhf-mui-components/mui/file-uploader/components/FileItem.js

A suite of 20+ production-ready react-hook-form components built with material-ui. Fully typed, tree-shakable, and optimized for enterprise-grade forms.

import { getFileSize } from "../../../utils/file.js";
import { jsx, jsxs } from "react/jsx-runtime";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import DeleteIcon from "@mui/icons-material/Delete";
//#region src/mui/file-uploader/components/FileItem.tsx
const FileItem = ({ index, file, showFileSize, removeFile }) => {
	const fileText = `${file.name} ${showFileSize ? `(${getFileSize(file.size)})` : ""}`;
	return /* @__PURE__ */ jsxs(Box, {
		display: "flex",
		justifyContent: "space-between",
		alignItems: "center",
		children: [/* @__PURE__ */ jsx(Typography, { children: fileText.trim() }), /* @__PURE__ */ jsx(IconButton, {
			size: "small",
			onClick: () => removeFile(index),
			"aria-label": `Remove file ${fileText.trim()}`,
			children: /* @__PURE__ */ jsx(DeleteIcon, { fontSize: "small" })
		})]
	});
};
//#endregion
export { FileItem as default };