Merge pull request #3 from La-404-Devinci/mobile-responsive

fix: project hydration error + add: slug to projectType
La-404-Devinci · Sep 27, 2024 · 61840eb · 61840eb
2 parents 6e0318f + 4c2cf29
commit 61840eb
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 29 deletions.
diff --git a/src/components/project.tsx b/src/components/project.tsx
@@ -5,7 +5,7 @@ import cn from "@/utils/function";
 import { ProjectType } from "@/utils/types";
 import { motion } from "framer-motion";
 import Image from "next/image";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 interface ProjectProps {
   project: ProjectType;
@@ -20,16 +20,58 @@ const anim = {
 
 const Project = ({ project, index }: ProjectProps) => {
 
-  const [isActive, setIsActive] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
   const isComputerOrLarger = useMediaQuery('(min-width: 1280px)');  
 
+  useEffect(() => {
+    setIsMounted(true);
+  }, [])
+
+  if(!isMounted) return null;
+
   if(!isComputerOrLarger) {
-    return <MobileProject project={project} index={index} />
+    return (
+      <a href={`/projects/${project.slug}`} className="w-full">
+        <MobileProject project={project} index={index} />
+      </a>
+    )
   }
 
-  return ( 
+  return (
+    <a href={`/projects/${project.slug}`} className="w-full">
+      <DesktopProject project={project} index={index} />
+    </a>
+  )
+}
+
+export default Project;
+
+
+const MobileProject = ({ project, index }: ProjectProps) => {
+
+  return(
+    <div 
+        className={cn(
+          "h-32 lg:h-40 flex items-center justify-between p-5 lg:p-8",
+          index === 0 
+            ? "border-t border-b border-gray-800" 
+            : "border-b border-gray-800"
+        )}
+      >
+        <div className="flex items-center gap-2 justify-center">
+          <h3 className="text-2xl sm:text-3xl md:text-5xl xl:text-6xl text-gray-50 font-medium">{project.name}</h3>
+        </div>
+        <p className="text-gray-400 text-sm md:text-base">{project.date}</p>
+      </div>
+  )
+}
+
+const DesktopProject = ({ project, index }: ProjectProps) => {
+
+  const [isActive, setIsActive] = useState(false);
+
+  return (
     <div 
-      key={`project:${index}`}
       className={cn(
         "h-40 flex items-center justify-between p-8",
         index === 0 
@@ -40,7 +82,7 @@ const Project = ({ project, index }: ProjectProps) => {
       onMouseLeave={() => {setIsActive(false)}}
     >
       <div className="flex items-center gap-8 justify-center">
-        <h3 className="text-4xl md:text-5xl xl:text-6xl text-gray-50 font-medium">{project.name}</h3>
+        <h3 className="text-2xl sm:text-3xl md:text-5xl xl:text-6xl text-gray-50 font-medium">{project.name}</h3>
         <motion.div 
           variants={anim} 
           animate={isActive ? "open" : "closed"}
@@ -58,28 +100,5 @@ const Project = ({ project, index }: ProjectProps) => {
       </div>
       <p className="text-gray-400">{project.date}</p>
     </div>
-    );
-}
-
-export default Project;
-
-
-const MobileProject = ({ project, index }: ProjectProps) => {
-
-  return(
-    <div 
-        key={`project:${index}`}
-        className={cn(
-          "h-32 lg:h-40 flex items-center justify-between p-5 lg:p-8",
-          index === 0 
-            ? "border-t border-b border-gray-800" 
-            : "border-b border-gray-800"
-        )}
-      >
-        <div className="flex items-center gap-2 justify-center">
-          <h3 className="text-2xl sm:text-3xl md:text-5xl text-gray-50 font-medium">{project.name}</h3>
-        </div>
-        <p className="text-gray-400 text-sm md:text-base">{project.date}</p>
-      </div>
   )
 }
diff --git a/src/components/sections/projects.tsx b/src/components/sections/projects.tsx
@@ -4,16 +4,19 @@ import Project from "../project";
 const projects = [
   {
     "name": "Pixel War",
+    "slug": "pixel-war",
     "date": "2023-2024",
     "image": "pixelwar.png",
   },
   {
     "name": "Hacker's Journey",
+    "slug": "hacker-journey",
     "date": "2023-2024",
     "image": "hackerjourney.png",
   },
   {
     "name": "Forum Associatif",
+    "slug": "forum-associatif",
     "date": "2023-2024",
     "image": "forumassociatif.png",
   },

diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -6,6 +6,7 @@ export type MemberType = {
 
 export type ProjectType = {
     name: string,
+    slug: string,
     date: string,
     image: string,
 }