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 diff --git a/components/PagesMetaHead.jsx b/components/PagesMetaHead.jsx index cebe2b8..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 ( - {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) => ( + + ))}
);