Skip to content

Add category filter to data.json and implement category-based filtering in UI #86

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add category filter to data.json and implement category-based filtering in UI #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 30 additions & 18 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,36 @@
import "./index.css";
import Card from "./components/Card";
import Nav from "./components/Nav";
import Footer from "./components/Footer";
import React, { useState } from "react";
import data from "../database/data.json"; // adjust the path if needed
import Card from "./Card"; // adjust path if needed

function App() {
export default function App() {
const [selectedCategory, setSelectedCategory] = useState("");

const categories = [...new Set(data.map(project => project.category))];


return (
<div className="App sm:w-full dark:bg-[#13131d]">
<Nav />
<h1 className="text-2xl md:text-4xl text-center pt-6 pb-12 dark:text-white">
List of Beginner Friendly OpenSource Projects
</h1>
<Card />
<Footer />
<div className="p-4">
<h1 className="text-3xl font-bold mb-4 text-center dark:text-white">Code Nexus Projects</h1>

<div className="mb-6 text-center">
<label htmlFor="category" className="text-lg font-semibold dark:text-white mr-2">
Filter by Category:
</label>
<select
id="category"
value={selectedCategory}
onChange={(e) => setSelectedCategory(e.target.value)}
className="p-2 rounded border dark:bg-[#1f1f1f] dark:text-white"
>
<option value="">All</option>
{categories.map((category, idx) => (
<option key={idx} value={category}>
{category}
</option>
))}
</select>
</div>

<Card selectedCategory={selectedCategory} />
</div>
);
}

export default App;


// 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
72 changes: 41 additions & 31 deletions src/components/Card.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,77 @@
import { BiGitRepoForked } from "react-icons/bi";
import { BsFillArrowUpRightCircleFill } from "react-icons/bs";
import React, { useState } from "react";
import data from "../database/data.json";
import React,{useState} from "react";
export default function Card() {
// useState

export default function Card({ selectedCategory }) {
const [numProjects, setNumProjects] = useState(5);
const [totalProjects, setTotalProjects] = useState(data.length);

// function to load more projects
const filteredData = selectedCategory
? data.filter((item) => item.category === selectedCategory)
: data;

const visibleProjects = filteredData.slice(0, numProjects);

const loadMore = () => {
setNumProjects(numProjects + 5);
};

return (
<div>
{data.slice(0, numProjects).map((item, i) => {
{visibleProjects.map((item, i) => {
return (
<div
key={i}
className="mx-auto bg-[#8800ff] w-5/6 flex-col flex p-6 items-center rounded-lg shadow-2xl text-white relative md:hover:shadow-3xl mb-12 md:w-11/12 md:flex-row md:gap-24 md:p-12 dark:bg-[#242435]"
className="mx-auto bg-[#8800ff] w-5/6 flex-col flex p-6 items-center rounded-lg shadow-2xl text-white relative md:hover:shadow-3xl mb-12 md:w-11/12 md:flex-row md:gap-24 md:p-12 dark:bg-[#242435]"
>
{/* image */}
<a href={item.link}>
<div className="h-[6rem] w-[10rem] md:h-[12rem] md:w-[20rem]">
<img
className="w-full h-full hover:scale-110 transition duration-100 ease-in hover:border-2 border-white"
src={item.img}
alt={`${item.title} logo`}
/>
</div>
</a>
{/* Content */}
<div className="content flex flex-col py-4 pr-4 md:p-2 ">

<div className="content flex flex-col py-4 pr-4 md:p-2">
<a href={item.link}>
<h2 className="text-sm text-purple-200 mb-6 tracking-[0.1rem] font-bold hover:text-[white] dark:hover:text-[#00a3ff] md:text-3xl dark:text-white">
<h2 className="text-sm text-purple-200 mb-6 tracking-[0.1rem] font-bold hover:text-[white] dark:hover:text-[#00a3ff] md:text-3xl dark:text-white">
{item.title}
</h2>
</a>
<p className="text-xs font-inter md:w-5/6 md:text-lg dark:text-[#acacac]">
<p className="text-xs font-inter md:w-5/6 md:text-lg dark:text-[#acacac]">
{item.description}
</p>
</div>
{/* Links */}
<div
className="flex absolute bg-purple-500 dark:bg-[#00a3ff] gap-2 md:gap-12 justify-between
flex-col right-0 top-0 h-full w-6 rounded-tr-lg rounded-br-lg px-4 py-6
md:p-4 items-center md:h-full md:py-12 md:px-4 md:w-12 md:right-0 md:flex-col "
>
<a href={item.ghLink} target="_blank" rel="noopener noreferrer">
<BiGitRepoForked className=" text-[#062a64] dark:text-white hover:text-white md:text-3xl" />
</a>
<a href={item.link} target="_blank" rel="noopener noreferrer">
<BsFillArrowUpRightCircleFill className=" text-[#062a64] dark:text-white hover:text-white md:text-3xl" />
</a>
<p className="text-xs italic mt-2 dark:text-[#ababab]">
Category: {item.category}
</p>
<div className="mt-4 text-sm">
<a
href={item.link}
target="_blank"
rel="noopener noreferrer"
className="underline hover:text-white"
>
Project Page
</a>{" "}
|{" "}
<a
href={item.ghLink}
target="_blank"
rel="noopener noreferrer"
className="underline hover:text-white"
>
GitHub Repo
</a>
</div>
</div>
</div>
);
})}
{/* Load More Button */}
{numProjects < totalProjects && (

{numProjects < filteredData.length && (
<button
onClick={loadMore}
className="text-xl mx-auto block bg-purple-300 rounded-xl hover:bg-purple-400 hover:text-white p-2
my-6 md:mt-2 md:mb-12 md:px-4 md:py-2 "
className="text-xl mx-auto block bg-purple-300 rounded-xl hover:bg-purple-400 hover:text-white p-2 my-6 md:mt-2 md:mb-12 md:px-4 md:py-2"
>
Load more
</button>
Expand Down
7 changes: 7 additions & 0 deletions src/database/data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,11 @@
"description": "Wind-Tails, an Open Source application for Tailwind CSS Prebuilt Components. You don't need to go anywhere to search for your required tailwind classes. Find here, a visual representation of the effects of various classes, along with a playground which shows in real-time the effect of tweaking various parameters of the class",
"ghLink": "https://github.com/dcryptoniun/Wind-Tails"
}

{
"name": "First-Contributions",
"description": "A project to help you make your first open-source contribution.",
"url": "https://github.com/firstcontributions/first-contributions",
"category": "Documentation"
}
]