Add filters filters for new buttons to filter out the internships on …

…the basis of selected role and industry

Added the new filter for sorting out the internships based on Role and Industry
-Made changes in the DataBase.json file according to the filters
-Updated the CSS portion to make filters according to the layout and style of the website
-Updated according to the earlier reviewed changes

src/Component/Documetation/Internship/InternPage.jsx

@@ -1,17 +1,28 @@
 /** @format */
 
 import "./internpage.css";
-import { useRef, useState } from "react";
+import { useRef, useState, useEffect } from "react";
 import PaginatedItems from "../../pagination";
+import internshipsData from "../../../DB/DataBase.json";
 
 let InternPage = () => {
   // Dispatch and Subscribe
   const button = document.querySelectorAll("viewMore");
   const ref = useRef(null);
 
+  const [internships, setInternships] = useState([]);
+  const [filteredData, setFilteredData] = useState([]);
   const [currentData, setCurrentData] = useState([]);
   const [pageSummary, setPageSummary] = useState("");
+  const [roleFilter, setRoleFilter] = useState("");
+  const [industryFilter, setIndustryFilter] = useState("");
   // console.log(currentData)
+  useEffect(()=>{
+    if (currentData.length === 0 || !roleFilter && !industryFilter) {
+      setCurrentData( internshipsData.slice(0, 12));  // Adjust the number as needed
+      console.log("Default internships shown due to no matches:", currentData);
+    }
+  },[currentData])
 
   const monthAbbreviations = {
     january: "Jan",
@@ -47,10 +58,88 @@ let InternPage = () => {
     }
     return month
   }
+  useEffect(() => {
+    console.log("Initial internships data:", internshipsData);
+    if (internshipsData && internshipsData.length > 0) {
+      setInternships(internshipsData);
+      const defaultData = internshipsData.slice(0, 12); // Show 12 items initially
+      console.log("Default Data:", defaultData);
+      setFilteredData(defaultData);
+      setCurrentData(defaultData);
+      setPageSummary(
+        `Showing 1 to ${Math.min(12, defaultData.length)} results out of ${internshipsData.length}`
+      );
+    } else {
+      console.error("Internships data is empty or not loaded correctly");
+    }
+  }, []);
+
+  useEffect(() => {
+    handleFilter();
+  }, [roleFilter, industryFilter]);
+
+  function handleFilter() {
+    console.log("Applying filters...");
+    console.log("Role Filter:", roleFilter);
+    console.log("Industry Filter:", industryFilter);
+
+    let filtered = internships;
+
+    if (roleFilter) {
+      filtered = filtered.filter(
+        (internship) =>
+          internship.role && internship.role.toLowerCase() === roleFilter.toLowerCase()
+      );
+      console.log("After role filter:", filtered);
+    }
+
+    if (industryFilter) {
+      filtered = filtered.filter(
+        (internship) =>
+          internship.industry && internship.industry.toLowerCase() === industryFilter.toLowerCase()
+      );
+      console.log("After industry filter:", filtered);
+    }
+     setFilteredData(filtered);
+    setCurrentData(filtered.slice(0, 6)); // Initially show first 12 items of filtered data
+    setPageSummary(
+      `Showing 1 to ${Math.min(12, filtered.length)} results out of ${filtered.length}`
+    );
+  }
 
   return (
     <div style={{ background: "black" }}>
       <p className="page-summary">{pageSummary}</p>
+      <div className="filterContainer">
+        <select
+          className="filterSelect"
+          value={roleFilter}
+          onChange={(e) => setRoleFilter(e.target.value)}
+        >
+          <option value="">Select Role</option>
+          <option value="Web Developer">Web Developer</option>
+          <option value="Java Developer">Java Developer</option>
+          <option value="Software Developer">Software Developer</option>
+          <option value="Sales">Sales</option>
+          <option value="Mentor">Mentor</option>
+          <option value="Other">Other</option>
+          {/* Add more options as needed */}
+        </select>
+
+        <select
+          className="filterSelect"
+          value={industryFilter}
+          onChange={(e) => setIndustryFilter(e.target.value)}
+        >
+          <option value="">Select Industry/Sector</option>
+          <option value="Education">Education</option>
+          <option value="Technology">Technology</option>
+          <option value="Finance">Finance</option>
+          <option value="Marketing">Marketing</option>
+          <option value="Others">Others</option>
+          {/* Add more options as needed */}
+        </select>
+      </div>
 
       <div className="internBox">
         {currentData.map((item, index) => {

src/Component/Documetation/Internship/internpage.css

@@ -112,9 +112,6 @@ body {
     transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
 
-.BoxContent {
-    /* position: relative; */
-}
 
 .MoreDetails {
     position: absolute;
@@ -235,6 +232,52 @@ body {
     color: blueviolet;
     padding: 15px 10%;
 }
+.filterContainer {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.filterSelect {
+    padding: 10px;
+    border: 2px solid rgb(190, 21, 228);
+    border-radius: 5px;
+    background-color: transparent;
+    color: white;
+    font-weight: bold;
+    font-size: 14px;
+    transition: border 0.3s, background-color 0.3s, color 0.3s;
+}
+
+.filterSelect:focus {
+    outline: none;
+    border-color: white;
+}
+
+.filterSelect option {
+    background-color: black;
+    color: white;
+}
+
+.filterButton {
+    padding: 10px 20px;
+    border: 2px solid rgb(190, 21, 228);
+    border-radius: 5px;
+    background-color: transparent;
+    color: white;
+    font-weight: bold;
+    font-size: 14px;
+    cursor: pointer;
+    transition: color 0.3s, background-color 0.3s, border 0.3s;
+}
+
+.filterButton:hover {
+    background-color: rgb(230, 153, 244);
+    color: black;
+    border: 2px solid white;
+}
 
 /* @mediaQwery */