mirror of
https://github.com/System-End/site.git
synced 2026-04-19 16:28:21 +00:00
Merge branch 'arcade-gallery' of https://github.com/claynicholson/site into pr/1312
This commit is contained in:
Max Wofford
commit
7c6823ff5f
8 changed files with 104 additions and 21 deletions
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import { Box, Card, Heading, Link, Text } from 'theme-ui'
|
||||
import { Box, Card, Heading, Link, Text, Close } from 'theme-ui'
|
||||
import styles from './cohort-card.module.css'
|
||||
import { useState } from 'react'
|
||||
import { Button } from 'theme-ui'
|
||||
|
|
@ -99,19 +99,29 @@ const CohortCard = ({
|
|||
bg: '#09AFB4',
|
||||
borderRadius: '10px',
|
||||
height: '32px',
|
||||
cursor: 'pointer'
|
||||
cursor: 'pointer',
|
||||
transitionDuration: '0.4s',
|
||||
'&:hover': {
|
||||
transform: 'scale(1.15)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon glyph="edit" />{' '}
|
||||
</div>
|
||||
<div
|
||||
onClick={handleDelete}
|
||||
onClick={e => {
|
||||
document.getElementById('delete-project').showModal()
|
||||
}}
|
||||
sx={{
|
||||
color: 'white',
|
||||
bg: '#09AFB4',
|
||||
borderRadius: '10px',
|
||||
height: '32px',
|
||||
cursor: 'pointer'
|
||||
cursor: 'pointer',
|
||||
transitionDuration: '0.4s',
|
||||
'&:hover': {
|
||||
transform: 'scale(1.15)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon glyph="minus" />{' '}
|
||||
|
|
@ -132,6 +142,47 @@ const CohortCard = ({
|
|||
<h1 className={styles.card_title}>{title}</h1>
|
||||
<p className={styles.card_description}>{desc}</p>
|
||||
</a>
|
||||
<dialog
|
||||
id="delete-project"
|
||||
sx={{ borderRadius: '10px', border: '3px dashed #09AFB4' }}
|
||||
className="gaegu"
|
||||
>
|
||||
<Text>Are you sure you want to delete this project?</Text>
|
||||
<br />
|
||||
<Button
|
||||
sx={{
|
||||
backgroundColor: '#FF5C00',
|
||||
color: '#FAEFD6',
|
||||
borderRadius: '5px',
|
||||
border: 'none',
|
||||
px: '20px',
|
||||
transitionDuration: '0.3s',
|
||||
'&:hover': {
|
||||
transform: 'scale(1.05)'
|
||||
},
|
||||
width: 'fit-content'
|
||||
}}
|
||||
onClick={e => {
|
||||
handleDelete()
|
||||
document.getElementById('add-project').close()
|
||||
}}
|
||||
>
|
||||
Yes
|
||||
</Button>
|
||||
<Close
|
||||
sx={{
|
||||
'&:hover': { cursor: 'pointer' },
|
||||
position: 'absolute',
|
||||
top: '10px',
|
||||
right: '10px',
|
||||
zIndex: 2,
|
||||
color: '#09AFB4'
|
||||
}}
|
||||
onClick={e => {
|
||||
document.getElementById('add-project').close()
|
||||
}}
|
||||
/>
|
||||
</dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@ const ProjectView = ({
|
|||
>
|
||||
{imagesList.map((image, index) => (
|
||||
<div
|
||||
key={index}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
|
@ -83,7 +84,6 @@ const ProjectView = ({
|
|||
}}
|
||||
>
|
||||
<img
|
||||
key={index}
|
||||
src={image}
|
||||
alt={`Project image ${index + 1}`}
|
||||
className={styles.image}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ const Footer = () => {
|
|||
clipRule="evenodd"></path>
|
||||
</svg>
|
||||
<div className={styles.footer_icons_container}>
|
||||
<a target="_self" rel="noopener me" href="/slack" title="Hack Club on Slack">
|
||||
<a target="_self" rel="noopener me" href="https://hackclub.com/slack" title="Hack Club on Slack">
|
||||
<svg fillRule="evenodd" clipRule="evenodd" strokeLinejoin="round"
|
||||
strokeMiterlimit="1.414" xmlns="http://www.w3.org/2000/svg" aria-label="slack-fill"
|
||||
viewBox="0 0 32 32" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32"
|
||||
|
|
|
|||
|
|
@ -86,6 +86,7 @@ const gallery = ({ posts }) => {
|
|||
playable={post.playable}
|
||||
images={post.images}
|
||||
githubProf={""}
|
||||
key={post.id}
|
||||
/>)
|
||||
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const flavorText = [
|
|||
"PUT that request back where it came from or so help me",
|
||||
"POST haste!",
|
||||
"TODO: Delete this message",
|
||||
<p style={{fontSize: "3px"}}>{sample(tinyEyes)}</p>,
|
||||
<p style={{fontSize: "3px"}} key="tinyEyes">{sample(tinyEyes)}</p>,
|
||||
"Caution: objects in loading box are slower than they appear",
|
||||
"Caution: wet pixels, do not touch",
|
||||
"*Fax machine noises*",
|
||||
|
|
|
|||
|
|
@ -61,8 +61,7 @@ a {
|
|||
}
|
||||
`
|
||||
|
||||
const ProjectGallery = ({ projects, loadProjects}) => {
|
||||
|
||||
const ProjectGallery = ({ projects, loadProjects }) => {
|
||||
return (
|
||||
<div className={styles.feed}>
|
||||
<div className={styles.container}>
|
||||
|
|
@ -120,11 +119,33 @@ const ProjectGallery = ({ projects, loadProjects}) => {
|
|||
)
|
||||
}
|
||||
|
||||
const Loading = () => <div sx={{width: '90vw', maxWidth: '1200px', margin: 'auto', textAlign: 'center'}}>Loading...</div>
|
||||
const Loading = () => (
|
||||
<div
|
||||
sx={{
|
||||
width: '90vw',
|
||||
maxWidth: '1200px',
|
||||
margin: 'auto',
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
Loading...
|
||||
</div>
|
||||
)
|
||||
|
||||
const ErrorMessage = () => <div sx={{width: '90vw', maxWidth: '1200px', margin: 'auto', textAlign: 'center'}}>There was an error loading your projects.</div>
|
||||
const ErrorMessage = () => (
|
||||
<div
|
||||
sx={{
|
||||
width: '90vw',
|
||||
maxWidth: '1200px',
|
||||
margin: 'auto',
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
There was an error loading your projects.
|
||||
</div>
|
||||
)
|
||||
|
||||
const my = () => {
|
||||
const My = () => {
|
||||
const [projects, setProjects] = useState([])
|
||||
const [name, setName] = useState('')
|
||||
const [status, setStatus] = useState('loading')
|
||||
|
|
@ -209,7 +230,7 @@ const my = () => {
|
|||
}
|
||||
|
||||
useEffect(async () => {
|
||||
loadProjects();
|
||||
loadProjects()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
|
|
@ -265,7 +286,6 @@ const my = () => {
|
|||
>
|
||||
<Text className="gaegu" sx={{ color: '#FF5C00' }}>
|
||||
{status == 'success' ? `Welcome, ${name}` : ''}
|
||||
|
||||
</Text>
|
||||
|
||||
<div>
|
||||
|
|
@ -293,13 +313,20 @@ const my = () => {
|
|||
</div>
|
||||
</Heading>
|
||||
</SlideDown>
|
||||
|
||||
{status == 'loading' && <Loading />}
|
||||
|
||||
{status == 'error' && <ErrorMessage />}
|
||||
|
||||
{status == 'success' && <ProjectGallery projects={projects} loadProjects={loadProjects} />}
|
||||
<dialog id="add-project" sx={{borderRadius: '10px', border: '3px dashed #09AFB4'}} className='gaegu'>
|
||||
<ProjectAddView />
|
||||
{status == 'success' && (
|
||||
<ProjectGallery projects={projects} loadProjects={loadProjects} />
|
||||
)}
|
||||
<dialog
|
||||
id="add-project"
|
||||
sx={{ borderRadius: '10px', border: '3px dashed #09AFB4' }}
|
||||
className="gaegu"
|
||||
>
|
||||
<ProjectAddView />
|
||||
<Close
|
||||
sx={{
|
||||
'&:hover': { cursor: 'pointer' },
|
||||
|
|
@ -322,4 +349,4 @@ const my = () => {
|
|||
)
|
||||
}
|
||||
|
||||
export default my
|
||||
export default My
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const Loading = () => <p>Loading...</p>
|
|||
|
||||
const ErrorMsg = () => <p>There was an error loading your project!</p>
|
||||
|
||||
export default ({ projectID }) => {
|
||||
const Showcase = ({ projectID }) => {
|
||||
const [status, setStatus] = useState('loading')
|
||||
const [project, setProject] = useState(null)
|
||||
|
||||
|
|
@ -137,7 +137,9 @@ export default ({ projectID }) => {
|
|||
)
|
||||
}
|
||||
|
||||
export default Showcase
|
||||
|
||||
export function getServerSideProps(context) {
|
||||
const { projectID } = context.query
|
||||
return { props: { projectID } }
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react'
|
||||
import BinPost from '../../components/bin/GalleryPosts'
|
||||
import styles from '../../public/bin/style/gallery.module.css'
|
||||
import Script from 'next/script'
|
||||
import Nav from '../../components/bin/nav'
|
||||
import Footer from '../../components/footer'
|
||||
import PartTag from '../../components/bin/PartTag';
|
||||
|
|
@ -72,7 +73,7 @@ function Gallery({ posts = [], tags = [] }) {
|
|||
<section className='page'>
|
||||
|
||||
<div className={styles.background}></div>
|
||||
<script src="https://awdev.codes/utils/hackclub/orph.js"></script>
|
||||
<Script src="https://awdev.codes/utils/hackclub/orph.js"></Script>
|
||||
|
||||
|
||||
|
||||
|
|
@ -90,6 +91,7 @@ function Gallery({ posts = [], tags = [] }) {
|
|||
return (
|
||||
<PartTag
|
||||
partID={tag.ID}
|
||||
key={tag.ID}
|
||||
search={true}
|
||||
addFilter={addFilter}
|
||||
removeFilter={removeFilter}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue