From 42f8c25f9ee481298a225e20a614396b2bd52473 Mon Sep 17 00:00:00 2001
From: Clay Nicholson <clayanicholson@gmail.com>
Date: Thu, 15 Aug 2024 16:14:59 -0400
Subject: [PATCH] Adding components outline

---
 components/arcade/showcase/cohort-card.js     | 11 +++
 .../arcade/showcase/cohort-card.module.css    | 18 +++++
 components/arcade/showcase/my.module.css      | 24 +++++++
 components/arcade/{ => showcase}/post.js      |  0
 .../arcade/{ => showcase}/post.module.css     |  0
 components/arcade/showcase/project-view.js    | 11 +++
 .../arcade/showcase/project-view.module.css   |  0
 pages/arcade/gallery.js                       | 42 ++---------
 pages/arcade/showcase/index.js                |  9 +++
 pages/arcade/showcase/my.js                   | 71 +++++++++++++++++++
 10 files changed, 148 insertions(+), 38 deletions(-)
 create mode 100644 components/arcade/showcase/cohort-card.js
 create mode 100644 components/arcade/showcase/cohort-card.module.css
 create mode 100644 components/arcade/showcase/my.module.css
 rename components/arcade/{ => showcase}/post.js (100%)
 rename components/arcade/{ => showcase}/post.module.css (100%)
 create mode 100644 components/arcade/showcase/project-view.js
 rename pages/api/arcade/showcase/my.js => components/arcade/showcase/project-view.module.css (100%)
 create mode 100644 pages/arcade/showcase/index.js
 create mode 100644 pages/arcade/showcase/my.js

diff --git a/components/arcade/showcase/cohort-card.js b/components/arcade/showcase/cohort-card.js
new file mode 100644
index 00000000..0f1df648
--- /dev/null
+++ b/components/arcade/showcase/cohort-card.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Box, Card, Heading, Text } from 'theme-ui'
+import styles from './cohort-card.module.css'
+
+const CohortCard = () => {
+  return (
+    <div className={styles.card}>Cohort Card</div>
+  )
+}
+
+export default CohortCard
\ No newline at end of file
diff --git a/components/arcade/showcase/cohort-card.module.css b/components/arcade/showcase/cohort-card.module.css
new file mode 100644
index 00000000..653f8b3a
--- /dev/null
+++ b/components/arcade/showcase/cohort-card.module.css
@@ -0,0 +1,18 @@
+.card{
+    flex: 1;
+    break-inside: avoid;
+    border-radius: 0.5rem; /* Equivalent to rounded-lg */
+    background-color: rgba(158, 158, 158, 1); /* Equivalent to bg-white/20 */
+    background-clip: padding-box; /* Equivalent to bg-clip-padding */
+    padding: 1.5rem 1.5rem 1rem 1.5rem; /* Equivalent to p-6 pb-4 */
+    cursor: pointer;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Equivalent to shadow-lg */
+    height: fit-content; /* Equivalent to h-fit */
+    margin-bottom: 24px; /* Add space between cards vertically */
+    min-height: 300px;
+    position: relative;
+    background-size: cover;
+    background-position: center;
+    overflow: hidden;
+    min-width: 200px;
+}
\ No newline at end of file
diff --git a/components/arcade/showcase/my.module.css b/components/arcade/showcase/my.module.css
new file mode 100644
index 00000000..5fa580d3
--- /dev/null
+++ b/components/arcade/showcase/my.module.css
@@ -0,0 +1,24 @@
+.feed{
+    min-height: 1000px;
+    padding-top: 32px;        
+    padding-bottom: 32px;    
+    width: 100%;              
+    overflow-y: auto;        
+    overflow-x: hidden;       
+    align-self: center;       
+    
+
+    @media (min-width: 640px) {
+        column-count: 1;          
+    }
+    
+      /* Medium screens */
+    @media (min-width: 768px) {
+        column-count: 2;          
+    }
+    
+      /* Large screens */
+    @media (min-width: 1024px) {
+        column-count: 3;          
+    }
+}
\ No newline at end of file
diff --git a/components/arcade/post.js b/components/arcade/showcase/post.js
similarity index 100%
rename from components/arcade/post.js
rename to components/arcade/showcase/post.js
diff --git a/components/arcade/post.module.css b/components/arcade/showcase/post.module.css
similarity index 100%
rename from components/arcade/post.module.css
rename to components/arcade/showcase/post.module.css
diff --git a/components/arcade/showcase/project-view.js b/components/arcade/showcase/project-view.js
new file mode 100644
index 00000000..39e065e0
--- /dev/null
+++ b/components/arcade/showcase/project-view.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const ProjectView = () => {
+  return (
+    <div>
+        Project View
+    </div>
+  )
+}
+
+export default ProjectView
diff --git a/pages/api/arcade/showcase/my.js b/components/arcade/showcase/project-view.module.css
similarity index 100%
rename from pages/api/arcade/showcase/my.js
rename to components/arcade/showcase/project-view.module.css
diff --git a/pages/arcade/gallery.js b/pages/arcade/gallery.js
index 3b58978e..cdd60f74 100644
--- a/pages/arcade/gallery.js
+++ b/pages/arcade/gallery.js
@@ -5,8 +5,9 @@ import BGImg from '../../components/background-image'
 import background from '../../public/home/assemble.jpg'
 import { Badge, Box, Button, Card, Container, Grid, Heading, Link, Text } from 'theme-ui'
 import SlideDown from '../../components/slide-down'
-import Post from '../../components/arcade/post'
-import styles from '../../components/arcade/post.module.css'
+import Post from '../../components/arcade/showcase/post'
+import styles from '../../components/arcade/showcase/post.module.css'
+import CohortCard from '../../components/arcade/showcase/cohort-card'
 
 export async function getStaticProps() {
     const host = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://hackclub.com';
@@ -73,6 +74,7 @@ const gallery = ({ posts }) => {
       </SlideDown>
 
         <div className={styles.feed}>
+            <CohortCard/>
             {posts.map(post => {
                 return (
                 <Post
@@ -87,42 +89,6 @@ const gallery = ({ posts }) => {
                 />)
 
             })}
-            <Post
-                title="My project"
-
-                />
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
-            <Post/>
         </div>      
         <Footer />
 
diff --git a/pages/arcade/showcase/index.js b/pages/arcade/showcase/index.js
new file mode 100644
index 00000000..d84ca506
--- /dev/null
+++ b/pages/arcade/showcase/index.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const index = () => {
+  return (
+    <div>index</div>
+  )
+}
+
+export default index
\ No newline at end of file
diff --git a/pages/arcade/showcase/my.js b/pages/arcade/showcase/my.js
new file mode 100644
index 00000000..d73ea2c9
--- /dev/null
+++ b/pages/arcade/showcase/my.js
@@ -0,0 +1,71 @@
+import React from 'react'
+import CohortCard from '../../../components/arcade/showcase/cohort-card'
+import ProjectView from '../../../components/arcade/showcase/project-view'
+import Nav from '../../../components/Nav'
+import Footer from '../../../components/arcade/Footer'
+import BGImg from '../../../components/background-image'
+import background from '../../../public/home/assemble.jpg'
+import { Button, Heading, Text } from 'theme-ui'
+import SlideDown from '../../../components/slide-down'
+import styles from '../../../components/arcade/showcase/my.module.css'
+
+
+const my = () => {
+  return (
+    <section>
+      <Nav />
+      {/*<BGImg 
+          src={background}
+          alt="Arcade Gallery BG Img"
+          priority
+      />*/}
+       <SlideDown duration={768}>
+        <Heading
+          as="h1"
+          variant="ultratitle"
+          sx={{
+            color: 'white',
+            textShadow: 'text',
+            filter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            WebkitFilter: 'drop-shadow(0 -2px 4px rgba(0,0,0,0.5))',
+            maxWidth: [null, 'copyUltra'],
+            my: [3, 4],
+            mx: 'auto',
+            zIndex: 1
+          }}
+        >
+          <Text
+            as="span"
+            sx={{
+              WebkitTextStroke: 'currentColor',
+              WebkitTextStrokeWidth: ['2px', '3px'],
+              WebkitTextFillColor: 'transparent'
+            }}
+          >
+            My Showcases
+          </Text>
+          <br />
+        <Button
+          as="a"
+          variant="ctaLg"
+          href="https://apply.hackclub.com"
+          target="_blank"
+          rel="noopener"
+        >
+          Add a Project
+        </Button>
+        </Heading>
+      </SlideDown>
+
+      <div className={styles.feed}>
+            <CohortCard/>
+            <CohortCard/>
+            <CohortCard/>
+
+        </div>      
+      <Footer />
+    </section>
+  )
+}
+
+export default my
\ No newline at end of file