Skip to content

Commit

Permalink
Added filters for projects
Browse files Browse the repository at this point in the history
  • Loading branch information
@AdvaitP10
AdvaitP10 committed Apr 12, 2024
1 parent 0688c26 commit 77365b1
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 26 deletions.
4 changes: 2 additions & 2 deletions frontend/src/components/ProjectCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
119 changes: 95 additions & 24 deletions frontend/src/pages/Projects.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand All @@ -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>
Expand Down

0 comments on commit 77365b1

Please sign in to comment.