System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 19:45:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding components outline

Browse source
This commit is contained in:
Clay Nicholson 2024-08-15 16:14:59 -04:00
parent b9790f1ef7
commit 42f8c25f9e
10 changed files with 148 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
components/arcade/showcase/cohort-card.js Normal file
View file

@ -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

18
components/arcade/showcase/cohort-card.module.css Normal file
View file

@ -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;
}

24
components/arcade/showcase/my.module.css Normal file
View file

@ -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;
}
}

0
components/arcade/post.js → components/arcade/showcase/post.js
View file

0
components/arcade/post.module.css → components/arcade/showcase/post.module.css
View file

11
components/arcade/showcase/project-view.js Normal file
View file

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

0
pages/api/arcade/showcase/my.js → components/arcade/showcase/project-view.module.css
View file

42
pages/arcade/gallery.js
View file

@ -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 />

9
pages/arcade/showcase/index.js Normal file
View file

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

71
pages/arcade/showcase/my.js Normal file
View file

@ -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