Project Section no result fix

src/components/projects/allProjects/Projects.css

@@ -3,6 +3,8 @@
   background: #000000;
   scroll-behavior: smooth;
   padding-bottom: 20px;
+  height: 100%;
+  width: 100%;
 }
 
 .Container-arrows {
@@ -74,6 +76,20 @@
   display: flex;
 }
 
+.empty_text {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+}
+
+.empty_text h1 {
+  text-align: center;
+  color: white;
+  padding-top: 100px;
+  font-size: xx-large;
+}
+
 /* Custom Scroll bar */
 .proj_slides::-webkit-scrollbar {
   background: transparent;

src/components/projects/allProjects/Projects.js

@@ -15,10 +15,37 @@ import "react-icons/fi";
 const Projects = () => {
   let [proj_type, setproj_type] = useState("all");
   let [proj_org, setproj_org] = useState("all");
+  const [empty, setEmpty] = useState(false);
   const handleChange = (e) => {
+
+    let empty = true
+    for(let i=0; i<SlideData.length; i++)
+    {
+
+      if (SlideData[i].tags.includes(e.target.value) && SlideData[i].org_tag.includes(proj_org))
+      {
+        empty = false;
+        break;
+      }
+    }
+    setEmpty(empty);
+
     setproj_type(e.target.value);
   };
   const handleOrg = (e) => {
+
+    let empty = true
+    for(let i=0; i<SlideData.length; i++)
+    {
+
+      if (SlideData[i].tags.includes(proj_type) && SlideData[i].org_tag.includes(e.target.value))
+      {
+        empty = false;
+        break;
+      }
+    }
+    setEmpty(empty);
+
     setproj_org(e.target.value);
   };
   useEffect(() => {
@@ -88,6 +115,8 @@ const Projects = () => {
           </select>
         </form>
       </div>
+      {!empty?
+      <>
       <div className="Container-arrows">
         <div className="Arrow1" onClick={slideLeft}>
           <FaArrowLeft />
@@ -105,6 +134,10 @@ const Projects = () => {
           }
         })}
       </div>
+      </>
+      :<div className="empty_text">
+          <h1>No Result Found :(</h1>
+        </div>}
     </div>
   );
 };