filtro projects

app/projects/page.js

@@ -4,11 +4,12 @@ import { useEffect, useState } from "react";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 import Link from 'next/link';
-import {myprojects} from "@/constants/projects.js";
+import ProjectCard from "@/components/projectCard";
+import {myprojectCards} from "@/constants/projectsCards.js";
 
 
 export default function Projects (){
-	const [projects, setProjects] = useState(myprojects);
+	const [projects, setProjects] = useState(myprojectCards);
 
 
 	useEffect(() => {
@@ -19,7 +20,7 @@ export default function Projects (){
 			<div className="projects">
 			<Header route={"/projects"}/>
 			    <main>
-			        <section className="our_projects">
+			        {/* <section className="our_projects">
 						<div>
 							project filter
 						</div>
@@ -43,7 +44,10 @@ export default function Projects (){
 			                </div>
 			                );
 			        	})}
-			        </section>
+			        </section> */}
+					<section>
+						<ProjectCard/>
+					</section>
 			    </main>
 		    <Footer/>
 			</div>

components/NavElement.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+function Nav(props) {
+  return (
+    <div style={{ margin: "10px" }}>
+
+
+      <button onClick={() => props.setFilter("UPM (REG)")}>dog</button>
+      <button onClick={() => props.setFilter("UPM individual")}>cat</button>
+      <button onClick={() => props.setFilter("other REG projects")}>lizard</button>
+    </div>
+  );
+}
+
+export default Nav;

components/projectCard.js

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import Link from "next/link";
+import { myProjectCards } from "@/constants/projectsCards";
+
+export default function projectCards(props) {
+  const [projectCards, setProjectCards] = useState(myProjectCards);
+  const [selectedCategory, setSelectedCategory] = useState("all");
+
+  const handleCategoryChange = (category) => {
+    setSelectedCategory(category);
+    if (category === "all") {
+      setProjectCards(myProjectCards);
+    } else {
+      const filteredCards = myProjectCards.filter(
+        (card) => card.category === category
+      );
+      setProjectCards(filteredCards);
+    }
+  };
+  return (
+    <div className="project_cards">
+      <div className="filter_options">
+        <button onClick={() => handleCategoryChange("all")}>All</button>
+        <button onClick={() => handleCategoryChange("ind")}>Ind</button>
+        <button onClick={() => handleCategoryChange("REG")}>REG</button>
+        <button onClick={() => handleCategoryChange("other")}>Other</button>
+      </div>
+      {projectCards.map(
+        ({ date, route, title, subtitle, tags, category }, index) => (
+          <div key={index} className="project_card">
+            <div className="year_and_cta">
+              <div className="date">{date}</div>
+              <a href={route}>details</a>
+            </div>
+            <div className="project_info">
+              <div className="project_title">{title}</div>
+              <div className="project_subtitle">{subtitle}</div>
+            </div>
+            <div className="project_tags">{tags}</div>
+          </div>
+        )
+      )}
+    </div>
+  );
+}

constants/projectsCards.js

@@ -0,0 +1,30 @@
+export const myProjectCards = [
+    {	"date": "2023",
+    "route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=356",
+    "title": "Utilización de escape rooms y videojuegos educativos en la Educación Universitaria",
+    "subtitle": "E.T.S DE ING. DE SISTEMAS INFORMÁTICOS",
+    "tags": "tag",
+    "category": "REG",
+},
+{	"date": "2023",
+"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=356",
+"title": "Utilización de escape rooms y videojuegos educativos en la Educación Universitaria",
+"subtitle": "E.T.S DE ING. DE SISTEMAS INFORMÁTICOS",
+"tags": "tag",
+"category": "ind",
+},
+{	"date": "2023",
+"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=356",
+"title": "Utilización de escape rooms y videojuegos educativos en la Educación Universitaria",
+"subtitle": "E.T.S DE ING. DE SISTEMAS INFORMÁTICOS",
+"category": "other",
+},
+{	"date": "2023",
+"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=356",
+"title": "Utilización de escape rooms y videojuegos educativos en la Educación Universitaria",
+"subtitle": "E.T.S DE ING. DE SISTEMAS INFORMÁTICOS",
+"tags": "tag",
+"category": "ind",
+}
+
+]