Skip to content

fix some issues #21

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 4 commits into
base: main
Choose a base branch
from
Open

fix some issues #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
65b919d
fix default page meta head of description
cysong Nov 20, 2024
346404b
add pnpm-lock.yaml to gitignore
cysong Nov 20, 2024
e166ace
fix issue: Support for defaultProps will be removed from function com…
cysong Nov 20, 2024
5a48c83
fix project filter by category and title
cysong Nov 21, 2024
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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,4 @@ yarn-error.log*

# vercel
.vercel
pnpm-lock.yaml
12 changes: 5 additions & 7 deletions components/PagesMetaHead.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Head>
<meta
Expand All @@ -16,10 +20,4 @@ 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',
};

export default PagesMetaHead;
4 changes: 2 additions & 2 deletions components/projects/ProjectsFilter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@ function ProjectsFilter({ setSelectProject }) {
dark:text-ternary-light
"
>
<option value={setSelectProject} className="text-sm sm:text-md">
<option value="" className="text-sm sm:text-md">
All Projects
</option>

{selectOptions.map((option) => (
<option className="text-normal sm:text-md" key={option}>
<option className="text-normal sm:text-md" key={option} value={option}>
{option}
</option>
))}
Expand Down
44 changes: 17 additions & 27 deletions components/projects/ProjectsGrid.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -73,8 +67,8 @@ function ProjectsGrid() {
<FiSearch className="text-ternary-dark dark:text-ternary-light w-5 h-5"></FiSearch>
</span>
<input
onChange={(e) => {
setSearchProject(e.target.value);
onInput={(e) => {
setSearchProject(e.target.value.trim());
}}
className="
ont-general-medium
Expand Down Expand Up @@ -102,18 +96,14 @@ function ProjectsGrid() {
/>
</div>

<ProjectsFilter setSelectProject={setSelectProject} />
<ProjectsFilter selectProject={selectProject} setSelectProject={setSelectProject} />
</div>
</div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6 sm:gap-5">
{selectProject
? selectProjectsByCategory.map((project, index) => {
return <ProjectSingle key={index} {...project} />;
})
: projectsData.map((project, index) => (
<ProjectSingle key={index} {...project} />
))}
{filteredProjects.map((project, index) => (
<ProjectSingle key={index} {...project} />
))}
</div>
</section>
);
Expand Down