From 65b919d8c6631b2e9520ea2eea58d29f9102acd1 Mon Sep 17 00:00:00 2001 From: Anson Date: Thu, 21 Nov 2024 12:08:03 +1300 Subject: [PATCH 1/4] fix default page meta head of description --- components/PagesMetaHead.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/PagesMetaHead.jsx b/components/PagesMetaHead.jsx index cebe2b8..4e120b3 100644 --- a/components/PagesMetaHead.jsx +++ b/components/PagesMetaHead.jsx @@ -19,7 +19,7 @@ function PagesMetaHead({ title, keywords, description }) { PagesMetaHead.defaultProps = { title: 'Next.js & TailwindCSS Portfolio Project', keywords: 'next.js, react, web, ui', - keywords: 'Simple and multi-page next.js and react application', + description: 'Simple and multi-page next.js and react application', }; export default PagesMetaHead; From 346404b6542cc677471d3a395a02ddef8acbaf4c Mon Sep 17 00:00:00 2001 From: Anson Date: Thu, 21 Nov 2024 12:09:28 +1300 Subject: [PATCH 2/4] add pnpm-lock.yaml to gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 1437c53..9918f23 100644 --- a/.gitignore +++ b/.gitignore @@ -32,3 +32,4 @@ yarn-error.log* # vercel .vercel +pnpm-lock.yaml From e166acecb97ea3a317a8d6abc7b7b2143f25884e Mon Sep 17 00:00:00 2001 From: Anson Date: Thu, 21 Nov 2024 12:18:55 +1300 Subject: [PATCH 3/4] fix issue: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. --- components/PagesMetaHead.jsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/components/PagesMetaHead.jsx b/components/PagesMetaHead.jsx index 4e120b3..0ab1c30 100644 --- a/components/PagesMetaHead.jsx +++ b/components/PagesMetaHead.jsx @@ -1,6 +1,10 @@ import Head from 'next/head'; -function PagesMetaHead({ title, keywords, description }) { +function PagesMetaHead({ + title = 'Next.js & TailwindCSS Portfolio Project', + keywords = 'next.js, react, web, ui', + description = 'Simple and multi-page next.js and react application' +}) { return ( Date: Thu, 21 Nov 2024 14:11:49 +1300 Subject: [PATCH 4/4] fix project filter by category and title --- components/projects/ProjectsFilter.jsx | 4 +-- components/projects/ProjectsGrid.jsx | 44 ++++++++++---------------- 2 files changed, 19 insertions(+), 29 deletions(-) diff --git a/components/projects/ProjectsFilter.jsx b/components/projects/ProjectsFilter.jsx index 95bacf5..fe2401d 100644 --- a/components/projects/ProjectsFilter.jsx +++ b/components/projects/ProjectsFilter.jsx @@ -27,12 +27,12 @@ function ProjectsFilter({ setSelectProject }) { dark:text-ternary-light " > - {selectOptions.map((option) => ( - ))} diff --git a/components/projects/ProjectsGrid.jsx b/components/projects/ProjectsGrid.jsx index 05f700b..4c77dfa 100644 --- a/components/projects/ProjectsGrid.jsx +++ b/components/projects/ProjectsGrid.jsx @@ -5,25 +5,19 @@ import { projectsData } from '../../data/projectsData'; import ProjectsFilter from './ProjectsFilter'; function ProjectsGrid() { - const [searchProject, setSearchProject] = useState(); - const [selectProject, setSelectProject] = useState(); + const [searchProject, setSearchProject] = useState(''); + const [selectProject, setSelectProject] = useState(''); - // @todo - To be fixed - // const searchProjectsByTitle = projectsData.filter((item) => { - // const result = item.title - // .toLowerCase() - // .includes(searchProject.toLowerCase()) - // ? item - // : searchProject == '' - // ? item - // : ''; - // return result; - // }); + const filteredProjects = projectsData.filter((project) => { + const matchesTitle = + searchProject === '' || + project.title.toLowerCase().includes(searchProject.toLowerCase()); + const matchesCategory = + selectProject === '' + ? true + : (project.category.charAt(0).toUpperCase() + project.category.slice(1)).includes(selectProject); - const selectProjectsByCategory = projectsData.filter((item) => { - let category = - item.category.charAt(0).toUpperCase() + item.category.slice(1); - return category.includes(selectProject); + return matchesTitle && matchesCategory; }); return ( @@ -73,8 +67,8 @@ function ProjectsGrid() { { - setSearchProject(e.target.value); + onInput={(e) => { + setSearchProject(e.target.value.trim()); }} className=" ont-general-medium @@ -102,18 +96,14 @@ function ProjectsGrid() { /> - +
- {selectProject - ? selectProjectsByCategory.map((project, index) => { - return ; - }) - : projectsData.map((project, index) => ( - - ))} + {filteredProjects.map((project, index) => ( + + ))}
);