fix responsive design

app/component/UploadFile.js

@@ -4,21 +4,42 @@ import { useRef } from "react";
 import { Button } from "@mui/material";
 import ProfileP from "@/components/icons/ProfileP";
 import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
+import { uploadImage } from "@/helper";
+import Image from "next/image";
 
-function UploadFile() {
+function UploadFile({ image, setImage }) {
   const fileRef = useRef();
 
   const openInput = () => fileRef.current.click();
+  const handleChange = async (e) => {
+    const result = await uploadImage(event);
+    setImage(result);
+  };
 
   return (
     <>
-      <input className="contents" ref={fileRef} type="file" />
-      <div
-        className="p-[24px] grid cursor-pointer place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full"
-        onClick={openInput}
-      >
-        <ProfileP />
-      </div>
+      <input
+        className="contents"
+        ref={fileRef}
+        type="file"
+        onChange={handleChange}
+      />
+      {image && image.blob ? (
+        <Image
+          width={24}
+          height={24}
+          src={image.blob}
+          alt="img-uploaded"
+          className="w-[74px] h-[74px] rounded-full overflow-hidden object-cover"
+        />
+      ) : (
+        <div
+          className="p-[24px] grid cursor-pointer place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full"
+          onClick={openInput}
+        >
+          <ProfileP />
+        </div>
+      )}
       <Button
         variant="text"
         onClick={openInput}