project detail

Weminal-labs · Nov 14, 2024 · 0c1243f · 0c1243f
1 parent 2ddea1a
commit 0c1243f
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 6 deletions.
diff --git a/src/app/members/[id]/page.tsx b/src/app/members/[id]/page.tsx
@@ -304,11 +304,11 @@ export default function Page({ params: { id } }: MemberDetailProps) {
                     </h3>
                     <div
                       className={`
-                        my-6 flex flex-row flex-wrap justify-end gap-4
+                        my-6 flex flex-row flex-wrap justify-center gap-4
 
-                        lg:flex-col lg:justify-center
+                        lg:flex-col
 
-                        md:items-end md:gap-6
+                        md:items-end md:justify-end md:gap-6
                       `}
                     >
                       <TechIcon icon={<SiNodedotjs size={24} />} />

diff --git a/src/app/projects/[id]/page.tsx b/src/app/projects/[id]/page.tsx
@@ -1,5 +1,7 @@
-"use client"
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
 import { Loader } from 'lucide-react'
+import Image from 'next/image'
 import { useEffect, useState } from 'react'
 
 import { type Project } from '@/components/Projects'
@@ -27,11 +29,112 @@ const ProjectDetail = ({ params: { id } }: ProjectDetailProps) => {
     })()
   }, [])
 
-  return isLoading ?
+  return isLoading || !project ?
       <div className="flex h-screen w-screen items-center justify-center">
         <Loader className="animate-spin" size={30} />
       </div>
-    : <></>
+    : <div
+        className={`
+          h-screen grid-cols-1
+
+          lg:grid lg:grid-cols-2
+        `}
+      >
+        <div
+          className={`
+            flex items-start px-6
+
+            lg:items-center lg:px-28
+          `}
+        >
+          <div className="flex flex-col gap-4">
+            <div
+              className={`
+                mt-10
+
+                lg:mt-0
+              `}
+            >
+              <h1
+                className={`
+                  text-center font-bebas-neue text-5xl
+
+                  lg:text-left lg:text-7xl
+                `}
+              >
+                {project?.title}
+              </h1>
+              <p
+                className={`
+                  mt-4
+
+                  lg:mt-0
+                `}
+              >
+                {project?.description}
+              </p>
+            </div>
+
+            <div className="flex flex-col gap-y-6 uppercase">
+              <div
+                className={`
+                  justify-start gap-10
+
+                  lg:flex
+                `}
+              >
+                <p className="min-w-52 font-medium uppercase">
+                  project members
+                </p>
+                <div className="flex flex-1 flex-wrap gap-3">
+                  {project.members.map((m) => (
+                    <p className="font-semibold" key={m.name}>
+                      {m.name}
+                    </p>
+                  ))}
+                </div>
+              </div>
+              <div
+                className={`
+                  justify-start gap-10
+
+                  lg:flex
+                `}
+              >
+                <p className="min-w-52 font-medium uppercase">techstacks</p>
+                <div className="flex flex-1 flex-wrap gap-4">
+                  {project.techstack.map((t) => (
+                    <p className="font-semibold" key={t}>
+                      {t}
+                    </p>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className={`
+            relative mt-10 h-72 w-full
+
+            lg:mt-0 lg:h-screen
+
+            md:h-96
+          `}
+        >
+          <Image
+            src={project.thumbnail}
+            alt=""
+            sizes="auto"
+            fill
+            className={`
+              object-cover
+
+              lg:object-contain
+            `}
+          />
+        </div>
+      </div>
 }
 
 export default ProjectDetail
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
@@ -13,6 +13,11 @@ export interface Project {
   link: string
   thumbnail: string
   description: string
+  members: {
+    name: string
+    role: string
+  }[]
+  techstack: string[]
 }
 
 const Projects = () => {