From f1b49ed282aa3f9d22673919492089195ecfbf55 Mon Sep 17 00:00:00 2001 From: emanuelpps Date: Mon, 18 Mar 2024 12:09:26 -0300 Subject: [PATCH] added feature of show more projects --- app/works/portfolio/PortfolioContainer.jsx | 34 ++++++++++++++++++++-- components/buttons/Contact/Contact.jsx | 2 +- components/buttons/MyWork/MyWork.jsx | 2 +- package-lock.json | 4 +-- package.json | 2 +- 5 files changed, 37 insertions(+), 7 deletions(-) diff --git a/app/works/portfolio/PortfolioContainer.jsx b/app/works/portfolio/PortfolioContainer.jsx index bf28731..72d499e 100644 --- a/app/works/portfolio/PortfolioContainer.jsx +++ b/app/works/portfolio/PortfolioContainer.jsx @@ -3,22 +3,52 @@ import React, { useEffect, useState } from "react"; import ProjectCard from "./ProjectCard"; import projects from "@/public/data/works.json"; import Link from "next/link"; +import { LuPlusSquare } from "react-icons/lu"; +import { LuMinusSquare } from "react-icons/lu"; function PortfolioContainer() { const [dataProjects, setDataProjects] = useState([]); + const [moreProjects, setMoreProjects] = useState(false); useEffect(() => { setDataProjects(projects); }, []); - return (
- {dataProjects?.map((project) => ( + {dataProjects?.slice(0, 6).map((project) => ( ))} + {moreProjects ? ( + <> + {dataProjects?.slice(6).map((project) => ( + + + + ))} + + ) : null} +
+ {moreProjects ? ( +
setMoreProjects(false)} + className="flex p-5 justify-center text-center md:text-left md:p-10 cursor-pointer border-[0.1px] rounded-xl mb-20 gap-5 border-gray-500 hover:bg-gray-500 hover:text-black" + > + + Hide Projects +
+ ) : ( +
setMoreProjects(true)} + className="flex p-5 justify-center text-center md:text-left md:p-10 cursor-pointer rounded-xl mb-20 gap-5 border-[0.1px] border-gray-500 hover:bg-gray-500 hover:text-black" + > + + More Projects +
+ )} +
); } diff --git a/components/buttons/Contact/Contact.jsx b/components/buttons/Contact/Contact.jsx index 602a8a6..ac3d501 100644 --- a/components/buttons/Contact/Contact.jsx +++ b/components/buttons/Contact/Contact.jsx @@ -4,7 +4,7 @@ import Link from "next/link"; function Contact() { return ( - + diff --git a/package-lock.json b/package-lock.json index dae2035..4e6d82b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "portfolio-vercel", - "version": "1.2.7", + "version": "1.3.7", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "portfolio-vercel", - "version": "1.2.7", + "version": "1.3.7", "dependencies": { "@emailjs/browser": "^3.12.1", "framer-motion": "^11.0.3", diff --git a/package.json b/package.json index aa4fe33..ec16b40 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "portfolio-vercel", - "version": "1.2.7", + "version": "1.3.7", "private": true, "scripts": { "dev": "next dev",