Merge pull request #7 from code-squads/Rohan

Verify with photo and landing page

Author: RohanDarade

package-lock.json

@@ -11,9 +11,13 @@
   "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-data-grid": "^6.0.4",
     "@mui/x-date-pickers": "^6.0.4",
+    "aos": "^2.3.4",
     "axios": "^1.3.5",
     "cheerio": "^1.0.0-rc.12",
     "firebase": "^9.19.1",

package.json

@@ -0,0 +1,82 @@
+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 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"
+              />
+            
+        ) : (
+          <div
+            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
+              icon={faImage}
+              size="3x"
+              className="text-gray-400"
+            />
+          </div>
+        )}
+      </div>
+      <div className="mt-4">
+        {image ? (
+          <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>
+  );
+};
+
+export default ImageUploader;

public/assets/emptyUser.png

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+
+const TagList = () => {
+  const [tags, setTags] = useState([]);
+  const [inputValue, setInputValue] = useState('');
+
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleInputKeyDown = (e) => {
+    if (e.key === 'Enter' && inputValue !== '') {
+      setTags([...tags, inputValue]);
+      setInputValue('');
+    } else if (e.key === 'Backspace' && inputValue === '') {
+      setTags(tags.slice(0, -1));
+    }
+  };
+
+  const handleRemoveTag = (tagIndex) => {
+    setTags(tags.filter((_, index) => index !== tagIndex));
+  };
+
+  return (
+    <div className="flex flex-wrap gap-2 w-1/4">
+      
+      <input
+        type="text"
+        value={inputValue}
+        onChange={handleInputChange}
+        onKeyDown={handleInputKeyDown}
+        placeholder='Enter the input tag'
+        className="block w-full rounded-md border-0 py-1.5 pl-4 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300"
+      />
+      {tags.map((tag, index) => (
+        <div
+          key={index}
+          className="flex items-center px-3 py-1 bg-slate-500 text-white rounded-md cursor-pointer"
+        >
+          <span className="mr-2">{tag}</span>
+          <button
+            className="text-sm font-bold text-white rounded-full "
+            onClick={() => handleRemoveTag(index)}
+          >
+            &times;
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default TagList;