From 3aa7aedecabf2711efa2aef6a4c1e16e184d6827 Mon Sep 17 00:00:00 2001 From: Alvalens Date: Tue, 18 Mar 2025 12:37:11 +0700 Subject: [PATCH] refactor: move ProjectCard component and add prop types validation --- app/projects/(project-card)/index.jsx | 17 +++++-- app/projects/components/ProjectCard.jsx | 65 +++++++++++++++++++++++++ app/projects/page.jsx | 28 +++++------ 3 files changed, 88 insertions(+), 22 deletions(-) create mode 100644 app/projects/components/ProjectCard.jsx diff --git a/app/projects/(project-card)/index.jsx b/app/projects/(project-card)/index.jsx index 6347a33..a4e8882 100644 --- a/app/projects/(project-card)/index.jsx +++ b/app/projects/(project-card)/index.jsx @@ -1,10 +1,10 @@ import Link from "next/link"; -import { motion } from "framer-motion"; import Image from "next/image"; -export default function projectCard({project, index, activeCategory}){ - console.log(project.category[0], activeCategory); - console.log(project.category.includes(activeCategory)); - return ( +import { motion } from "framer-motion"; +import PropTypes from "prop-types"; + +export default function ProjectCard({ project, index, activeCategory }) { + return ( <> {project.category.includes(parseInt(activeCategory)) && ( @@ -56,3 +56,10 @@ export default function projectCard({project, index, activeCategory}){ ); } + +ProjectCard.propTypes = { + project: PropTypes.object.isRequired, + index: PropTypes.number.isRequired, + activeCategory: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + .isRequired, +}; diff --git a/app/projects/components/ProjectCard.jsx b/app/projects/components/ProjectCard.jsx new file mode 100644 index 0000000..a4e8882 --- /dev/null +++ b/app/projects/components/ProjectCard.jsx @@ -0,0 +1,65 @@ +import Link from "next/link"; +import Image from "next/image"; +import { motion } from "framer-motion"; +import PropTypes from "prop-types"; + +export default function ProjectCard({ project, index, activeCategory }) { + return ( + <> + {project.category.includes(parseInt(activeCategory)) && ( + + + Alvalens +
+

{project.year}

+
+
+

{project.title}

+

+ {project.desc[0].length > 125 + ? `${project.desc[0].slice(0, 125)}...` + : project.desc[0]} +

+
+ {project.tech.map((t, index) => ( + + {t} + + ))} +
+
+ + + )} + + ); +} + +ProjectCard.propTypes = { + project: PropTypes.object.isRequired, + index: PropTypes.number.isRequired, + activeCategory: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + .isRequired, +}; diff --git a/app/projects/page.jsx b/app/projects/page.jsx index 885593e..f4f9344 100644 --- a/app/projects/page.jsx +++ b/app/projects/page.jsx @@ -12,7 +12,7 @@ import ReactChat3 from "@/public/image/projects/web/trivia/trivia3.png"; import ProjectAll from "@/public/image/projects.png"; import Hr from "@/components/Hr"; -import ProjectCard from "./(project-card)"; +import ProjectCard from "./components/ProjectCard"; import Projects from "@/json/data.json"; import FixedButon from "@/components/FixedButton"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -22,12 +22,11 @@ const category = { 1: "Web Development", 2: "AI & Machine Learning", 9: "Other", -} +}; export default function Page() { const [activeCategory, setActiveCategory] = useState(1); - const projects = Projects.Projects.filter ((item) => item.show === true - ); + const projects = Projects.Projects.filter((item) => item.show === true); useEffect(() => { window.scrollTo(0, 0); @@ -36,10 +35,7 @@ export default function Page() { <>
- +
@@ -181,15 +177,13 @@ export default function Page() { Generative Trivia

- A generative trivia website built with Next.js, - Firebase, NextAuth, Google OAuth, and TypeScript. - Users can generate trivia questions for predefined - school subjects and answer them with a unique - interactive input style. The application supports - user authentication with Google and stores data in - Firestore. You can see the source code of this - project on my github account or preview the project - by clicking the button below. + A generative trivia website built with Next.js, Firebase, + NextAuth, Google OAuth, and TypeScript. Users can generate trivia + questions for predefined school subjects and answer them with a + unique interactive input style. The application supports user + authentication with Google and stores data in Firestore. You can + see the source code of this project on my github account or + preview the project by clicking the button below.

{" "}