Modified HBForm & HBContest Page

client/src/components/InsertImage.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 interface InsertImageProps {
-    onImageSelected: (file: File) => void;
+    onImageSelected: (file: File | null) => void;
 }
 
 const InsertImage: React.FC<InsertImageProps> = ({ onImageSelected }) => {
@@ -10,22 +10,31 @@ const InsertImage: React.FC<InsertImageProps> = ({ onImageSelected }) => {
 
     const handleImageSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
         const selectedFiles = event.target.files as FileList;
-        const file = selectedFiles?.[0];
-        if (file) {
-            setSelectedFile(file);
-            setPreviewImage(URL.createObjectURL(file));
-            onImageSelected(file);
-        }
+        const file = selectedFiles?.[0] || null;
+        setSelectedFile(file);
+        setPreviewImage(file ? URL.createObjectURL(file) : '');
+        onImageSelected(file);
     };
 
     return (
-        <div>
-            <input type="file" onChange={handleImageSelect} />
+        <div
+            className="flex flex-col items-center p-5 bg-white dark:bg-zinc-800 rounded-md"
+            style={{ width: 350, height: 500 }}
+        >
+            <input
+                type="file"
+                onChange={handleImageSelect}
+                className="mb-4"
+            />
             {selectedFile && (
-                <img src={previewImage} alt="Selected Image" />
+                <img
+                    src={previewImage}
+                    alt="Selected Image"
+                    className="w-full h-full object-cover rounded-md"
+                />
             )}
         </div>
     );
 };
 
-export default InsertImage;
+export default InsertImage;