Update input components

lib/component/input/file/FileInput.tsx

@@ -1,22 +1,25 @@
-import { SecondaryButton } from "$/component/button";
+import { DangerButton, SecondaryButton } from "$/component/button";
 import type { FileInputProps } from "$/types/InputTypes";
 import { humanReadableBytes } from "$/util/FileUtil";
 import clsx from "clsx";
 import { useRef, useState } from "react";
+import { FaRegFolderOpen } from "react-icons/fa6";
+import { MdClose } from "react-icons/md";
 
 
 export default function FileInput({
 	id,
 	className,
 	name,
+	ariaLabel,
 	minSize,
 	maxSize,
-	showFileName,
-	showSize,
+	showFileName = true,
+	showSize = true,
 	onChange,
 	disabled,
 	children
-}: FileInputProps){
+}: Readonly<FileInputProps>){
 	const inputRef = useRef<HTMLInputElement>(null);
 	const [ file, setFile ] = useState<File>();
 
@@ -24,7 +27,7 @@ export default function FileInput({
 	return (
 		<div
 			className={clsx(
-				"flex flex-row items-center justify-between w-full border-2 rounded-lg",
+				"flex flex-row items-center justify-between border-2 rounded-lg",
 				className
 			)}
 		>
@@ -34,7 +37,13 @@ export default function FileInput({
 				type="file"
 				className="sr-only"
 				name={name}
-				onChange={(e) => { setFile(e.target.files?.[0]); onChange?.(e.target.files?.[0]); }}
+				aria-label={ariaLabel}
+				onChange={(e) => {
+					const currentFile = e.target.files?.[0];
+					setFile(currentFile);
+					if ((minSize && currentFile && currentFile.size < minSize) || (maxSize && currentFile && currentFile.size > maxSize)) return;
+					onChange?.(currentFile);
+				}}
 				disabled={disabled}
 			/>
 			<div
@@ -48,6 +57,16 @@ export default function FileInput({
 					showFileName &&
 					<div>{file?.name}</div>
 				}
+				{
+					file &&
+					<DangerButton
+						shape="square"
+						variant="icon"
+						onClick={(e) => { e.preventDefault(); setFile(undefined); onChange?.(undefined); }}
+					>
+						<MdClose size={22} className="fill-danger"/>
+					</DangerButton>
+				}
 				{
 					!children && !showFileName &&
 					<>&nbsp;</>
@@ -56,12 +75,13 @@ export default function FileInput({
 					showSize &&
 					<div
 						className={clsx(
+							"ml-4",
 							{
-								"text-red-600": minSize && file?.size && file?.size < minSize,
-								"text-red-600 ": maxSize && file?.size && file?.size > maxSize,
-								"text-green-600": minSize && !maxSize && file?.size && file?.size > minSize,
-								"text-green-600 ": !minSize && maxSize && file?.size && file?.size < maxSize,
-								" text-green-600": minSize && maxSize && file?.size && file?.size > minSize && file?.size < maxSize
+								"text-danger": minSize && file?.size && file?.size < minSize,
+								"text-danger ": maxSize && file?.size && file?.size > maxSize,
+								"text-success": minSize && !maxSize && file?.size && file?.size > minSize,
+								"text-success ": !minSize && maxSize && file?.size && file?.size < maxSize,
+								" text-success": minSize && maxSize && file?.size && file?.size > minSize && file?.size < maxSize
 							}
 						)}
 					>
@@ -75,10 +95,13 @@ export default function FileInput({
 				<SecondaryButton
 					className="text-nowrap rounded-r-lg"
 					rounding="none"
+					shape="square"
+					size="lg"
 					onClick={() => { inputRef.current?.click(); }}
 					disabled={disabled}
+					aria-label="Select File"
 				>
-					Click Me
+					<FaRegFolderOpen />
 				</SecondaryButton>
 			</div>
 		</div>