created drop down menu for responsive devices and hide that menu in l…

…arge screens
Avdhesh-Varshney · May 25, 2024 · a7e8842 · a7e8842
1 parent 291e5d7
commit a7e8842
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 56 deletions.
diff --git a/src/components/Pages/MainPage.jsx b/src/components/Pages/MainPage.jsx
@@ -1,66 +1,114 @@
-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 } = props;
+  if (category === "") return <Dashboard />;
 
-	const [projectsData, setProjectsData] = useState([]);
-	const [tag, setTag] = useState('All');
+  const [projectsData, setProjectsData] = 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 () => {
+      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, category, props]);
 
-	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>
+  const handleTagClick = (selectedTag) => {
+    setTag(selectedTag);
+  };
 
-			<ProjectCards projectsData={projectsData} tech={getTech(category)} />
-		</>
-	);
-}
+  return (
+    <>
+      <h1 className="text-end my-2 mx-3">{`${getName(category)} Projects`}</h1>
+
+      <div className="d-flex justify-content-end my-2 mx-3">
+        <div className="button-group">
+          <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>
+
+        <div className="dropdown">
+          <select
+            className="dropdown form-select "
+            onChange={(e) => handleTagClick(e.target.value)}
+          >
+            <option value="Basic">Easy</option>
+            <option value="Intermediate">Medium</option>
+            <option value="Advanced">Hard</option>
+            <option value="All">All</option>
+          </select>
+        </div>
+      </div>
+
+      <ProjectCards projectsData={projectsData} tech={getTech(category)} />
+    </>
+  );
+};
 
 export default MainPage;
diff --git a/src/components/Pages/mainpage.css b/src/components/Pages/mainpage.css
@@ -0,0 +1,17 @@
+/* mainpage.css */
+.button-group {
+  display: flex;
+}
+
+.dropdown {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .button-group {
+    display: none;
+  }
+  .dropdown {
+    display: block;
+  }
+}