fixed gallery

components/arcade/showcase/cohort-card.js

@@ -3,22 +3,22 @@ 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, desc, slack, scrapbook, playable, images, githubProf, draggable = false }) => {
 
   console.log(images)
   return (
     <>
-    <a href="https://www.google.com" className={styles.linkWrapper} target="_blank" rel="noopener noreferrer">
-      <div className={styles.card}>
-          <img src={images ? (images[0].url) : ("https://img.buzzfeed.com/buzzfeed-static/static/2020-05/21/17/asset/19f3032de0de/sub-buzz-1010-1590082675-7.png")} alt="Project Image" className={styles.card_img}/>
+      <a href="https://www.google.com" className={styles.linkWrapper} target="_blank" rel="noopener noreferrer">
+        <div className={styles.card}>
+          <img src={images ? (images[0]) : ("https://img.buzzfeed.com/buzzfeed-static/static/2020-05/21/17/asset/19f3032de0de/sub-buzz-1010-1590082675-7.png")} alt="Project Image" className={styles.card_img} />
           <h1 className={styles.card_title}>{title}</h1>
           <p className={styles.card_description}>{desc}</p>
-        
-      </div>
-    </a>
+
+        </div>
+      </a>
     </>
-    
-    
+
+
   )
 }
 

components/arcade/showcase/cohort-card.module.css

@@ -1,4 +1,4 @@
-.card{
+.card {
     flex: 1;
     break-inside: avoid;
     position: relative;
@@ -13,7 +13,7 @@
 
 }
 
-.card_img{
+.card_img {
     width: 100%;
     height: auto;
     max-height: 100%;
@@ -23,14 +23,15 @@
 
 }
 
-.card_title{
+.card_title {
+    color: #333;
     font-size: 1.5rem;
     font-weight: bold;
     margin-bottom: 0;
 
 }
 
-.card_description{
+.card_description {
     font-size: 1rem;
     color: #333;
     margin: 0;
@@ -41,9 +42,10 @@
     overflow: hidden;
     text-overflow: ellipsis;
     max-height: 3em;
+    margin-bottom: 10px;
 }
 
-.linkWrapper{
+.linkWrapper {
     display: block;
     text-decoration: none;
     color: inherit;

components/arcade/showcase/create-card.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import styles from './create-card.module.css'
+
+const CreateCard = ({ createCardLink }) => {
+  return (
+    <>
+    <a href={createCardLink} className={styles.linkWrapper} rel="noopener noreferrer">
+      <div className={styles.card}>
+        Create a card
+      </div>
+    </a>
+    </>
+  )
+}
+
+export default CreateCard

components/arcade/showcase/create-card.module.css

@@ -0,0 +1,14 @@
+.card{
+    flex: 1;
+    break-inside: avoid;
+    position: relative;
+    background-size: cover;
+    background-position: center;
+    overflow: hidden;
+    min-width: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    justify-content: flex-start;
+
+}

pages/arcade/showcase/my.js

@@ -13,7 +13,7 @@ const ProjectGallery = ({ projects }) => {
   console.log('projects', projects)
 
   return (
-    <div className={styles.gallery}>
+    <div className={styles.feed}>
       {projects.map(project => (
         <CohortCard
           key={project.id}
@@ -27,6 +27,7 @@ const ProjectGallery = ({ projects }) => {
           githubProf={project.githubProf}
         />
       ))}
+
     </div>
   )
 }
@@ -81,7 +82,21 @@ const my = () => {
               zIndex: 1
             }}
           >
+<<<<<<< Updated upstream
             My Ships
+=======
+          
+            <Text
+              as="span"
+              sx={{
+                WebkitTextStroke: 'currentColor',
+                WebkitTextStrokeWidth: ['2px', '3px'],
+                WebkitTextFillColor: 'transparent'
+              }}
+            >
+              My Ships
+            </Text>
+>>>>>>> Stashed changes
             <br />
             <Button
               as="a"
@@ -98,6 +113,20 @@ const my = () => {
         { status === 'error' && <ErrorMessage /> }
         { status === 'success' && <ProjectGallery projects={projects} /> }
       </div>
+<<<<<<< Updated upstream
+=======
+          {
+            status == 'loading' && <Loading />
+          }
+        
+          {
+            status == 'error' && <ErrorMessage />
+          }
+
+          {
+            status == 'success' && <ProjectGallery projects={projects} />
+          }
+>>>>>>> Stashed changes
       <Footer />
     </section>
   )

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Page = () => {
+  return (
+    <div>Project</div>
+  )
+}
+
+export default Page