Basic updates

Author: RohanDarade

package-lock.json

@@ -11,6 +11,9 @@
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/material": "^5.11.15",
     "@mui/x-date-pickers": "^6.0.4",
     "aos": "^2.3.4",

package.json

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faImage } from "@fortawesome/free-solid-svg-icons";
+
+const ImageUploader = () => {
+  const [image, setImage] = useState(null);
+
+  const handleImageChange = (event) => {
+    setImage(URL.createObjectURL(event.target.files[0]));
+  };
+
+  return (
+    <div>
+      <div className="relative w-64 h-64">
+        <input
+          type="file"
+          className="absolute inset-0 opacity-0 w-full h-full cursor-pointer"
+          onChange={handleImageChange}
+        />
+        {image ? (
+          <img
+            src={image}
+            alt="Selected"
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <div
+            className="w-full h-full border-2 border-dashed border-gray-400 rounded-lg flex justify-center items-center cursor-pointer"
+            onClick={() => document.getElementById("imageUpload").click()}
+          >
+            <FontAwesomeIcon
+              icon={faImage}
+              size="3x"
+              className="text-gray-400"
+            />
+          </div>
+        )}
+      </div>
+      <div>
+        {image ? (
+          <div>hey</div>
+        ) : (
+          <div>
+            <div>
+              
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ImageUploader;

public/assets/emptyUser.png

@@ -0,0 +1,15 @@
+import React from 'react'
+import ImageUploader from '@/components/ImageUploader';
+
+
+const ReportEmployeeWithPhoto = () => {
+  return (
+    <div>
+<ImageUploader></ImageUploader>
+    </div>
+  )
+}
+
+export default ReportEmployeeWithPhoto;
+
+