project section changes

src/components/CardYear.tsx

@@ -1,9 +1,9 @@
-interface YearCardProps {
-  year: number;
+interface LabelCardProps {
+  label: number | string;
 }
 
-const YearCard = ({ year }: YearCardProps): JSX.Element => {
-  return <div className="font-semibold text-xl">{year}</div>;
+const LabelCard = ({ label }: LabelCardProps): JSX.Element => {
+  return <div className="font-semibold text-xl">{label}</div>;
 };
 
-export default YearCard;
+export default LabelCard;

src/components/ProjectYearSection.tsx

@@ -1,21 +0,0 @@
-import { IProject } from "../types/IProject";
-import YearCard from "./CardYear";
-import ProjectCard from "./ProjectCard";
-
-type ProjectYearSectionProps = {
-  year: number;
-  projects: IProject[];
-};
-
-const ProjectYearSection = ({ year, projects }: ProjectYearSectionProps) => {
-  return (
-    <>
-      <YearCard year={year} />
-      {projects.map((project, index) => (
-        <ProjectCard key={index} {...project} />
-      ))}
-    </>
-  );
-};
-
-export default ProjectYearSection;

src/components/ProjectsSection.tsx

@@ -0,0 +1,21 @@
+import { IProject } from "../types/IProject";
+import LabelCard from "./CardYear";
+import ProjectCard from "./ProjectCard";
+
+type ProjectYearSectionProps = {
+  year: number | string;
+  projects: IProject[];
+};
+
+const ProjectsSection = ({ year, projects }: ProjectYearSectionProps) => {
+  return (
+    <div className="2xl:grid hidden xl:grid-cols-4 sm:grid-cols-3 gap-4">
+      <LabelCard label={year} />
+      {projects.map((project, index) => (
+        <ProjectCard key={index} {...project} />
+      ))}
+    </div>
+  );
+};
+
+export default ProjectsSection;