Games tab on admin page working

src/components/input/FileInput.tsx

@@ -0,0 +1,48 @@
+import { BsCloudUpload } from "react-icons/bs";
+
+export default function FileInput({
+	file,
+	setFile
+}:{
+	file: File | null | undefined;
+	setFile: (input: File | null) => void;
+}){
+	return (
+		<div
+			className="relative border-2 rounded-lg border-gray-500 h-24 mx-4 w-[28rem] z-0"
+		>
+			<div
+				className="absolute cursor-text left-0 -top-3 bg-white dark:bg-neutral-800 text-gray-500 mx-1 px-1"
+			>
+				Icon File
+			</div>
+			<input
+				type="file"
+				name="iconFile"
+				className="relative opacity-0 w-full h-full z-50 cursor-pointer"
+				onChange={(e) => setFile(e.target.files?.[0] ?? null)}
+			/>
+			<div
+				className="absolute top-0 left-0 flex flex-col justify-center items-center w-full h-full"
+			>
+				<div
+					className="flex flex-row gap-2"
+				>
+					<BsCloudUpload
+						size={24}
+					/>
+					Drop files anywhere or click to select file
+				</div>
+				{
+					file && (
+						<p
+							className="text-green-600"
+						>
+							Name: {file.name}
+						</p>
+					)
+				}
+			</div>
+		</div>
+	);
+}

src/components/input/IconInput.tsx

@@ -0,0 +1,37 @@
+import FileInput from "./FileInput";
+
+
+export default function IconInput({
+	file,
+	setFile,
+	addErrorMessage
+}:{
+	file: File | null | undefined;
+	setFile: (input: File | null) => void;
+	addErrorMessage: (message: string) => void;
+}){
+	const setIconFile = (inputFile: File | null) => {
+		if((inputFile) && (!inputFile.type.startsWith("image"))){
+			addErrorMessage("File is invalid image format: " + inputFile.type);
+		}
+		//Prevent files larger than 10MB form being uploaded
+		else if((inputFile) && (inputFile.size > 10485760)){
+			addErrorMessage("File is too large: " + inputFile.size + " bytes");
+		}
+		//Prevent empty files
+		else if((inputFile) && (inputFile.size <= 0)){
+			addErrorMessage("File is empty");
+		}
+		else{
+			setFile(inputFile);
+		}
+	}
+
+
+	return (
+		<FileInput
+			file={file}
+			setFile={setIconFile}
+		/>
+	);
+}