Update input components

lib/component/input/file/DragAndDropFileInput.tsx

@@ -1,41 +1,47 @@
+import { DangerButton } from "$/component/button";
 import type { FileInputProps } from "$/types/InputTypes";
 import { humanReadableBytes } from "$/util/FileUtil";
 import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
+import { MdClose } from "react-icons/md";
 
 
 export default function DragAndDropFileInput({
 	id,
 	className,
 	name,
+	ariaLabel,
 	minSize,
 	maxSize,
-	showFileName,
-	showSize,
+	showFileName = true,
+	showSize = true,
 	onChange,
 	disabled,
 	children
-}: FileInputProps){
+}: Readonly<FileInputProps>){
 	const [ file, setFile ] = useState<File>();
 	const inputRef = useRef<HTMLInputElement>(null);
 
 
-	useEffect(() => {
-		onChange?.(file);
-	}, [ file, onChange ]);
-
 	return (
 		<label
 			className={clsx(
-				"flex flex-col items-center justify-center border-2 rounded-lg w-full h-full cursor-pointer",
+				"flex flex-col items-center justify-center border-2 rounded-lg cursor-pointer",
+				//TODO: Make hover classes
 				className
 			)}
 			onDragOver={(e) => e.preventDefault()}
 			onDrop={(e) => {
 				e.preventDefault();
-				setFile(e.dataTransfer.files[0]);
+				const currentFile = e.dataTransfer.files[0];
+				setFile(currentFile);
+
+				if ((minSize && currentFile.size < minSize) || (maxSize && currentFile.size > maxSize)) return;
+
+				onChange?.(currentFile);
 				if(inputRef.current){ inputRef.current.files = e.dataTransfer.files; }
 			}}
+			aria-label={ariaLabel}
 		>
 			<input
 				ref={inputRef}
@@ -43,24 +49,40 @@ export default function DragAndDropFileInput({
 				id={id}
 				className="sr-only"
 				name={name}
-				onChange={(e) => setFile(e.target.files?.[0])}
+				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
-				className="flex flex-col items-center justify-between w-full h-full px-2"
+				className="flex flex-col items-center justify-between px-2"
 			>
-				{children}
+				<div className="flex flex-row items-center justify-center">
+					{children}
+				</div>
 				<div
-					className="flex flex-row items-center justify-between gap-x-8 w-full"
+					className="flex flex-row items-center justify-between gap-x-2 w-full"
 				>
 					{
 						showFileName &&
-						<div
-							className="text-center"
-						>
+						<div className="flex flex-row items-center justify-center gap-x-2">
 							{file?.name}
 						</div>
 					}
+					{
+						file &&
+						<DangerButton
+							className="mr-4"
+							shape="square"
+							variant="icon"
+							onClick={(e) => { e.preventDefault(); setFile(undefined); onChange?.(undefined); }}
+						>
+							<MdClose size={22} className="fill-danger"/>
+						</DangerButton>
+					}
 					{
 						showSize &&
 						<div