From 77365b16cd2b51300058f85ff12bc67fc6421c38 Mon Sep 17 00:00:00 2001
From: Advait Rajaram Patole <advaitpatole10@gmail.com>
Date: Fri, 12 Apr 2024 08:26:04 +0530
Subject: [PATCH] Added filters for projects

---
 frontend/src/components/ProjectCard.js |   4 +-
 frontend/src/pages/Projects.jsx        | 119 ++++++++++++++++++++-----
 2 files changed, 97 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/ProjectCard.js b/frontend/src/components/ProjectCard.js
index c257e56..a5dcf65 100644
--- a/frontend/src/components/ProjectCard.js
+++ b/frontend/src/components/ProjectCard.js
@@ -18,9 +18,9 @@ function ProjectCard(props) {
               {props.title}
             </h3>
 
-            <p className="mt-2 line-clamp-3 text-sm/relaxed text-gray-500">
+            {/* <p className="mt-2 line-clamp-3 text-sm/relaxed text-gray-500">
               {props.description}
-            </p>
+            </p> */}
           </div>
         </article>
       </a>
diff --git a/frontend/src/pages/Projects.jsx b/frontend/src/pages/Projects.jsx
index 838422b..c26d53d 100644
--- a/frontend/src/pages/Projects.jsx
+++ b/frontend/src/pages/Projects.jsx
@@ -2,6 +2,7 @@ import ProjectCard from "../components/ProjectCard"
 import axios from "axios";
 import { useEffect } from "react";
 import { useState } from "react";
+import { useMemo } from "react";
 import "../components/ProjectCard.css";
 import {Outlet} from 'react-router-dom'
 
@@ -22,34 +23,104 @@ export default function Projects() {
       });
   }, []);
 
-  return (<section className="project-card" >
+//   const details = [
+//     {
+//       "id": 1,
+//       "title": "Speech emotion recognition",
+//       "general_category": "ML",
+//       "banner_image": "http://127.0.0.1:8000/media/projects/emotion_detection.png"
+//   },
+//   {
+//       "id": 2,
+//       "title": "Test Project",
+//       "general_category": "Development",
+//       "banner_image": "http://127.0.0.1:8000/media/projects/For_his_participation_in_the_5-day_Grand_Entrepreneur_Workshop_held_by_Liceria__Co..png"
+//     },
+//     {
+//       "id": 3,
+//       "title": "Speech emotion recognition",
+//       "general_category": "Blockchain",
+//       "banner_image": "http://127.0.0.1:8000/media/projects/emotion_detection.png"
+//   },
+//   {
+//       "id": 4,
+//       "title": "Test Project",
+//       "general_category": "CP",
+//       "banner_image": "http://127.0.0.1:8000/media/projects/For_his_participation_in_the_5-day_Grand_Entrepreneur_Workshop_held_by_Liceria__Co..png"
+//     },
+//   {
+//       "id": 5,
+//       "title": "Test Project",
+//       "general_category": "Others",
+//       "banner_image": "http://127.0.0.1:8000/media/projects/For_his_participation_in_the_5-day_Grand_Entrepreneur_Workshop_held_by_Liceria__Co..png"
+//     }
+//   ]
+
+// GeneralCategoryChoices = (
+//   ('ML', 'ML'),
+//   ('Developement', 'Development'),
+//   ('Blockchain', 'Blockchain'),
+//   ('CP', 'CP'),
+//   ('Others', 'Others'),
+//     )
+
+
+  
+  const [filterValue, setFilterValue] = useState('All');
+
+  const filteredProjects = useMemo(() => {
+    return details.filter(project => project.general_category.includes(filterValue) || filterValue==="All");
+  }, [details, filterValue]);
+
+  const handleFilterChange = (value) => {
+    setFilterValue(value);
+  };
+
+  const [active, setActive] = useState('b1');
+
+
+  return (<section className="project-card " >
     <Outlet/>
-    <div className="px-24 py-20 grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8 ">
-      <ProjectCard  ProjectId="1" link="https://itc.gymkhana.iitb.ac.in/wncc/assets/images/soc/2023/item221.jpg" title="TEXT SUMMARIZATION WEB APP" description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
-      pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis quidem,
-      mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius atque
-      dignissimos. Molestias explicabo corporis voluptatem?"/>
-      <ProjectCard ProjectId="2" link="https://itc.gymkhana.iitb.ac.in/wncc/assets/images/soc/2023/item222.jpg" title="Competitive Programming" description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
-      pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis quidem,
-      mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius atque
-      dignissimos. Molestias explicabo corporis voluptatem?"/>
-      <ProjectCard ProjectId="3" link="https://itc.gymkhana.iitb.ac.in/wncc/assets/images/soc/2023/item226.png" title="Developing Trading Strategy with Pine Script" description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
-      pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis quidem,
-      mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius atque
-      dignissimos. Molestias explicabo corporis voluptatem?"/>
-      <ProjectCard ProjectId="4" link="https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" title="How to position your furniture for positivity" description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
-      pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis quidem,
-      mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius atque
-      dignissimos. Molestias explicabo corporis voluptatem?"/>
-      <ProjectCard ProjectId="5" link="https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" title="How to position your furniture for positivity" description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
-      pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis quidem,
-      mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius atque
-      dignissimos. Molestias explicabo corporis voluptatem?"/>
+    
+
+    <div className="pt-8 flex items-center justify-center">
+      <div className="inline-flex rounded-md shadow-sm" role="group">
+        <button type="button" onClick={() => {handleFilterChange('All'); setActive('b1')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b1' ? 'text-white' :'text-gray-900'} ${active==='b1' ? 'bg-indigo-600' : 'bg-white'} border border-gray-500 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2  `}>
+          ALL
+        </button>
+        <button type="button" onClick={() => {handleFilterChange('ML'); setActive('b2')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b2' ? 'text-white' :'text-gray-900'} ${active==='b2' ? 'bg-indigo-600' : 'bg-white'} border border-gray-500 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2`}>
+          ML
+        </button>
+        <button type="button" onClick={() => {handleFilterChange('Development'); setActive('b3')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b3' ? 'text-white' :'text-gray-900'} ${active==='b3' ? 'bg-indigo-600' : 'bg-white'} border border-gray-500 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 `}>
+          Development
+        </button>
+        <button type="button" onClick={() => {handleFilterChange('Blockchain'); setActive('b4')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b4' ? 'text-white' :'text-gray-900'} ${active==='b4' ? 'bg-indigo-600' : 'bg-white'} border border-gray-500 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 `}>
+          Blockchain
+        </button>
+        <button type="button" onClick={() => {handleFilterChange('CP'); setActive('b5')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b5' ? 'text-white' :'text-gray-900'} ${active==='b5' ? 'bg-indigo-600' : 'bg-white'} border border-gray-500 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 `}>
+          CP
+        </button>
+        <button type="button" onClick={() => {handleFilterChange('Others'); setActive('b6')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b6' ? 'text-white' :'text-gray-900'} ${active==='b6' ? 'bg-indigo-600' : 'bg-white'} border border-gray-500 rounded-e-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 `}>
+          Others
+        </button>
+      </div>
     </div>
+    {/* <div className="px-24  pt-10 grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8 ">
+      <ProjectCard ProjectId="1" general_category="ML" link="https://itc.gymkhana.iitb.ac.in/wncc/assets/images/soc/2023/item221.jpg" title="TEXT SUMMARIZATION WEB APP"/>
+      <ProjectCard ProjectId="2" general_category="Development" link="https://itc.gymkhana.iitb.ac.in/wncc/assets/images/soc/2023/item222.jpg" title="Competitive Programming"/>
+      <ProjectCard ProjectId="3" general_category="Blockchain" link="https://itc.gymkhana.iitb.ac.in/wncc/assets/images/soc/2023/item226.png" title="Developing Trading Strategy with Pine Script"/>
+      <ProjectCard ProjectId="4" general_category="CP" link="https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" title="How to position your furniture for positivity"/>
+      <ProjectCard ProjectId="5" general_category="Others" link="https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" title="How to position your furniture for positivity"/>
+    </div> */}
     <div className="px-24 grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8 py-20">
-    {details.map((details, index) => (
+    {/* {details.map((details, index) => (
+      <div key={index}>
+        <ProjectCard ProjectId={`project+${details.id}`} link={details.banner_image} title={details.title} description={details.props} />
+      </div>
+    ))} */}
+    {filteredProjects.map((project, index) =>(
       <div key={index}>
-        <ProjectCard link={details.banner_image} title={details.title} description={details.props} />
+        <ProjectCard ProjectId={`project+${project.id}`} link={project.banner_image} title={project.title} description={project.props} />
       </div>
     ))}
     </div>