Drop down

src/components/Pages/MainPage.jsx

@@ -1,66 +1,101 @@
-import React, { useEffect, useState } from 'react';
-import ProjectCards from '../Cards/ProjectCards';
-import './mainpage.css';
-import Dashboard from './Dashboard';
+import React, { useEffect, useState } from "react";
+import ProjectCards from "../Cards/ProjectCards";
+import "./mainpage.css";
+import Dashboard from "./Dashboard";
 
 const MainPage = (props) => {
-	const { category, routes } = props;
-	if (category === '') return <Dashboard />;
+  const { category, routes, setProgress } = props;
+  if (category === "") return <Dashboard />;
 
-	const [projectsData, setProjectsData] = useState([]);
-	const [tag, setTag] = useState('All');
+  const [projectsData, setProjectsData] = useState([]);
+  const [filteredData, setFilteredData] = useState([]);
+  const [tag, setTag] = useState("All");
 
-	const getName = (category) => {
-		let filtered = routes.filter(obj => obj.path === `/${category}`);
-		return filtered[0].name;
-	}
-	const getTech = (category) => {
-		let filtered = routes.filter(obj => obj.path === `/${category}`);
-		return filtered[0].tech;
-	}
+  const getName = (category) => {
+    let filtered = routes.filter((obj) => obj.path === `/${category}`);
+    return filtered[0].name;
+  };
 
-	useEffect(() => {
-		const fetchData = async () => {
-			props.setProgress(10);
-			try {
-				const response = await fetch(`https://raw.githubusercontent.com/Avdhesh-Varshney/WebMasterLog/main/database/${category}.json`);
-				if (!response.ok) {
-					throw new Error('Failed to fetch projects data');
-				}
-				props.setProgress(30);
-				const data = await response.json();
-				props.setProgress(50);
-				let filteredData = data;
-				if (tag !== 'All') {
-					filteredData = data.filter(project => project.tag === tag);
-				}
-				props.setProgress(80);
-				setProjectsData(filteredData);
-			} catch (error) {
-				console.error('Error fetching projects data:', error);
-			}
-			props.setProgress(100);
-		};
-		fetchData();
-	}, [tag]);
+  const getTech = (category) => {
+    let filtered = routes.filter((obj) => obj.path === `/${category}`);
+    return filtered[0].tech;
+  };
 
-	const handleTagClick = (selectedTag) => {
-		setTag(selectedTag);
-	};
+  useEffect(() => {
+    const fetchData = async () => {
+      setProgress(10);
+      try {
+        const response = await fetch(
+          `https://raw.githubusercontent.com/Avdhesh-Varshney/WebMasterLog/main/database/${category}.json`
+        );
+        if (!response.ok) {
+          throw new Error("Failed to fetch projects data");
+        }
+        setProgress(30);
+        const data = await response.json();
+        setProgress(50);
+        setProjectsData(data);
+        setFilteredData(data);
+        setProgress(80);
+      } catch (error) {
+        console.error("Error fetching projects data:", error);
+      }
+      setProgress(100);
+    };
+    fetchData();
+  }, [category, setProgress]);
 
-	return (
-		<>
-			<h1 className='text-end my-2 mx-3'>{`${getName(category)} Projects`}</h1>
-			<div className="d-flex justify-content-end my-2 mx-3">
-				<button type="button" className={`btn btn${tag !== 'Basic'? '-outline': ''}-success mx-1`} onClick={() => handleTagClick('Basic')}>Easy</button>
-				<button type="button" className={`btn btn${tag !== 'Intermediate'? '-outline': ''}-warning mx-1`} onClick={() => handleTagClick('Intermediate')}>Medium</button>
-				<button type="button" className={`btn btn${tag !== 'Advanced'? '-outline': ''}-danger mx-1`} onClick={() => handleTagClick('Advanced')}>Hard</button>
-				<button type="button" className={`btn btn${tag !== 'All'? '-outline': ''}-info mx-1`} onClick={() => handleTagClick('All')}>All</button>
-			</div>
+  useEffect(() => {
+    if (tag === "All") {
+      setFilteredData(projectsData);
+    } else {
+      setFilteredData(projectsData.filter((project) => project.tag === tag));
+    }
+  }, [tag, projectsData]);
 
-			<ProjectCards projectsData={projectsData} tech={getTech(category)} />
-		</>
-	);
-}
+  const handleTagClick = (selectedTag) => {
+    setTag(selectedTag);
+  };
+
+  useEffect(() => {
+    const dropdown = document.querySelector(".custom-dropdown");
+    if (dropdown) {
+      const colorMap = {
+        Basic: "green",
+        Intermediate: "yellow",
+        Advanced: "red",
+        All: "#1E90FF",
+      };
+      dropdown.style.border = '1px solid '+colorMap[tag] || "blue";
+      dropdown.style.color = colorMap[tag] || "blue";
+    }
+  }, [tag]);
+
+  return (
+    <>
+      <h1 className='text-end my-2 mx-2'>{`${getName(category)} Projects`}</h1>
+      <div className="button-group justify-content-end my-2 mx-3">
+        <button type="button" className={`btn btn${tag !== 'Basic'? '-outline': ''}-success mx-1`} onClick={() => handleTagClick('Basic')}>Easy</button>
+        <button type="button" className={`btn btn${tag !== 'Intermediate'? '-outline': ''}-warning mx-1`} onClick={() => handleTagClick('Intermediate')}>Medium</button>
+        <button type="button" className={`btn btn${tag !== 'Advanced'? '-outline': ''}-danger mx-1`} onClick={() => handleTagClick('Advanced')}>Hard</button>
+        <button type="button" className={`btn btn${tag !== 'All'? '-outline': ''}-info mx-1`} onClick={() => handleTagClick('All')}>All</button>
+      </div>
+
+      <ProjectCards projectsData={filteredData} tech={getTech(category)} />
+
+      <div className="dropdown">
+        <select
+          className="dropdown form-select custom-dropdown"
+          onChange={(e) => handleTagClick(e.target.value)}
+        >
+          <option value="Basic">Easy</option>
+          <option value="Intermediate">Medium</option>
+          <option value="Advanced">Hard</option>
+          <option value="All" selected>All</option>
+        </select>
+      </div>
+    </>
+  );
+};
 
 export default MainPage;

src/components/Pages/mainpage.css

@@ -0,0 +1,73 @@
+/* mainpage.css */
+.button-group {
+  display: flex;
+}
+
+.dropdown {
+  display: none;
+  background: none;
+  width: 150px;
+  margin-left: auto;
+}
+
+/* Main Page Styles */
+
+.text-end {
+  text-align: end;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.mx-3 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.justify-content-end {
+  justify-content: flex-end;
+}
+
+.button-group button {
+  margin: 0 0.5rem;
+}
+
+.custom-dropdown {
+  background-color: #222;
+  color: #fff;
+  border-radius: 4px;
+  padding: 0.5rem;
+  font-size: 1rem;
+  transition: all 0.3s ease;
+}
+
+.custom-dropdown:focus {
+  border-color: #888;
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
+}
+
+.custom-dropdown option {
+  background-color: #222;
+  color: #fff;
+}
+
+@media (max-width: 768px) {
+  .button-group {
+    display: none;
+  }
+  .dropdown {
+    display: block;
+  }
+}
+
+
+.dropdown select{
+  background: none;
+}