Update

components/arcade/showcase/cohort-card.js

@@ -3,7 +3,7 @@ import { Box, Card, Heading, Link, Text } from 'theme-ui'
 import styles from './cohort-card.module.css'
 
 
-const CohortCard = ({ id, title, desc, slack, scrapbook, playable, images, githubProf, draggable = false }) => {
+const CohortCard = ({ id, title = "Title Not Found", desc = "Description Not Found", slack = "Slack Not Found", scrapbook = "", playLink = "", images = [], githubProf, githubLink = "", draggable = false}) => {
 
   console.log(images)
   return (

components/arcade/showcase/project-view.js

@@ -1,9 +1,27 @@
 import React from 'react'
+import styles from './project-view.module.css'
 
-const ProjectView = () => {
+const ProjectView = ({ id, title = "Title Not Found", desc = "Description Not Found", slack = "Slack Not Found", scrapbook = "", playLink = "", images = [], githubProf, githubLink = ""}) => {
   return (
-    <div>
-        Project View
+<div className={styles.container}>
+      <h1 className={styles.title}>{title}</h1>
+      
+      <div className={styles.imageGallery}>
+        {images.map((image, index) => (
+          <img key={index} src={image} alt={`Project image ${index + 1}`} className={styles.image} />
+        ))}
+      </div>
+      
+      <p className={styles.description}>{desc}</p>
+      
+      <div className={styles.buttonGroup}>
+        <a href={githubLink} target="_blank" rel="noopener noreferrer" className={styles.button}>
+          View on GitHub
+        </a>
+        <a href={playLink} target="_blank" rel="noopener noreferrer" className={styles.button}>
+          Play
+        </a>
+      </div>
     </div>
   )
 }

components/arcade/showcase/project-view.module.css

@@ -0,0 +1,53 @@
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    font-family: Arial, sans-serif;
+  }
+  
+  .title {
+    font-size: 2.5rem;
+    margin-bottom: 20px;
+    text-align: center;
+    color: #333;
+  }
+  
+  .imageGallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 10px;
+    margin-bottom: 20px;
+  }
+  
+  .image {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+  }
+  
+  .description {
+    font-size: 1.2rem;
+    color: #555;
+    margin-bottom: 30px;
+    line-height: 1.6;
+  }
+  
+  .buttonGroup {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+  }
+  
+  .button {
+    padding: 10px 20px;
+    background-color: #0070f3;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+  }
+  
+  .button:hover {
+    background-color: #005bb5;
+  }
+  

pages/arcade/showcase/project/[ID]/index.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router';
-import CohortCard from '../../../../../components/arcade/showcase/cohort-card'
+import ProjectView from '../../../../../components/arcade/showcase/project-view'
 
 
-const Page = () => {
+const ProjectShowPage = () => {
   const router = useRouter();
   const { id } = router.query;
 
@@ -28,14 +28,15 @@ const Page = () => {
       setStatus('error')
       return
     } else {
-      setProjects(data.projects)
+      setProject(data.projects)
       setStatus('success')
     }
+    console.log("project", project);
   }, [])
 
   return (
     <div>
-      <CohortCard
+      <ProjectView
         key={project.id}
         id={project.id}
         title={project.title}
@@ -50,4 +51,4 @@ const Page = () => {
   )
 }
 
-export default Page
+export default ProjectShowPage