Verify Employee with Photo Done

Author: RohanDarade

src/components/ImageUploader.jsx

@@ -1,31 +1,39 @@
 import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faImage } from "@fortawesome/free-solid-svg-icons";
+import Loader from "./loader";
 
 const ImageUploader = () => {
   const [image, setImage] = useState(null);
+  const [value, setValue] = useState(false);
+  const [loading, setLoading] = useState(true);
 
   const handleImageChange = (event) => {
     setImage(URL.createObjectURL(event.target.files[0]));
   };
 
+  // if(loading){
+  //   return <Loader></Loader>
+  // }
+
   return (
-    <div>
-      <div className="relative w-64 h-64">
+    <div className="flex flex-col items-center">
+      <div className="relative mt-4 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"
-          />
+              <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"
+            className="w-full h-full border-2 border-dashed border-[#DBE3EE] dark:border-gray-400 bg-[#F6F9FC] dark:bg-[#1F232D] rounded-lg flex justify-center items-center cursor-pointer"
             onClick={() => document.getElementById("imageUpload").click()}
           >
             <FontAwesomeIcon
@@ -36,17 +44,37 @@ const ImageUploader = () => {
           </div>
         )}
       </div>
-      <div>
+      <div className="mt-4">
         {image ? (
-          <div>hey</div>
-        ) : (
           <div>
             <div>
-              
+              {value ? (
+                <div className=" border-2 border-dashed border-red-400 text-red-400 p-16 rounded-lg bg-[#F6F9FC] dark:bg-[#1F232D]">
+                  The employee has been flaged by other employeers earlier !!!
+                </div>
+              ) : (
+                <div className=" border-2 border-dashed border-green-500 text-green-500 p-16 rounded-lg bg-[#F6F9FC] dark:bg-[#1F232D] ">
+                  Woah! the employee has no previous flags and is to be hired
+                </div>
+              )}
+            </div>
+          </div>
+        ) : (
+          <div>
+            <div className=" border-2 border-dashed border-[#DBE3EE] dark:border-gray-400 p-16 rounded-lg bg-[#F6F9FC] dark:bg-[#1F232D] text-[#9BA3AF]">
+              Upload an image to get the report about the employee
             </div>
           </div>
         )}
       </div>
+      <button
+        onClick={() => {
+          setLoading(false);
+          // console.log(value);
+        }}
+      >
+        Change color
+      </button>
     </div>
   );
 };

src/pages/reportEmployeeWithPhoto.jsx

@@ -1,11 +1,9 @@
 import React from 'react'
-import ImageUploader from '@/components/ImageUploader';
 
 
 const ReportEmployeeWithPhoto = () => {
   return (
     <div>
-<ImageUploader></ImageUploader>
         reportEmployeeWithPhoto
     </div>
   )

src/pages/verifyEmployeeWithPhoto.jsx

@@ -1,11 +1,19 @@
-import React from 'react'
+import React from "react";
+import ImageUploader from "@/components/ImageUploader";
 
 const VerifyEmployeeWithPhoto = () => {
   return (
-    <div>
-        Verify Employee With Photo
+    <div className="w-[70%]">
+      <div className="w-[100%] dark:text-white dark:bg-dark2 text-dark3">
+        <div className="flex flex-row items-center text-[26px] font-medium h-[70px] pl-[40px] border-b-[1px] dark:border-[#232830] border-[#DCE3EE] bg-">
+          Verify Employee
+        </div>
+      </div>
+      <div className="flex w-full justify-center">
+        <ImageUploader></ImageUploader>
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default VerifyEmployeeWithPhoto
+export default VerifyEmployeeWithPhoto;