mirror of
https://github.com/System-End/site.git
synced 2026-04-19 23:22:49 +00:00
more styling
This commit is contained in:
Belle
parent
5526393372
commit
4c04c28f39
11 changed files with 409 additions and 255 deletions
|
|
@ -3,65 +3,136 @@ import { Box, Card, Heading, Link, Text } from 'theme-ui'
|
|||
import styles from './cohort-card.module.css'
|
||||
import { useState } from 'react'
|
||||
import { Button } from 'theme-ui'
|
||||
import Icon from '@hackclub/icons'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
const CohortCard = ({ id, title = "Title Not Found", desc = "Description Not Found", slack = "Slack Not Found", scrapbook = "", playLink = "", images = [], githubProf, githubLink = "", draggable = false, personal = false, reload}) => {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
const CohortCard = ({
|
||||
id,
|
||||
title = 'Title Not Found',
|
||||
desc = 'Description Not Found',
|
||||
slack = 'Slack Not Found',
|
||||
scrapbook = '',
|
||||
playLink = '',
|
||||
images = [],
|
||||
githubProf,
|
||||
githubLink = '',
|
||||
draggable = false,
|
||||
personal = false,
|
||||
reload
|
||||
}) => {
|
||||
const [isHovered, setIsHovered] = useState(false)
|
||||
|
||||
async function handleDelete() {
|
||||
try {
|
||||
const authToken = window.localStorage.getItem('arcade.authToken');
|
||||
const authToken = window.localStorage.getItem('arcade.authToken')
|
||||
|
||||
if (!authToken) {
|
||||
throw new Error('Authorization token is missing.');
|
||||
throw new Error('Authorization token is missing.')
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/arcade/showcase/projects/${id}/delete`, {
|
||||
const response = await fetch(
|
||||
`/api/arcade/showcase/projects/${id}/delete`,
|
||||
{
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`,
|
||||
'Content-Type': 'application/json'
|
||||
Authorization: `Bearer ${authToken}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({}) // Empty body since your API expects some body content
|
||||
});
|
||||
}
|
||||
)
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to delete project with ID ${id}: ${response.statusText}`);
|
||||
throw new Error(
|
||||
`Failed to delete project with ID ${id}: ${response.statusText}`
|
||||
)
|
||||
}
|
||||
|
||||
console.log(`Project with ID ${id} marked as deleted.`);
|
||||
} catch (error) {
|
||||
console.error('Error deleting project:', error);
|
||||
console.log(`Project with ID ${id} marked as deleted.`)
|
||||
} catch (error) {
|
||||
console.error('Error deleting project:', error)
|
||||
}
|
||||
|
||||
reload()
|
||||
}
|
||||
|
||||
reload();
|
||||
}
|
||||
|
||||
|
||||
const firstImage = images[0] || "https://picsum.photos/200"
|
||||
const firstImage = images[0] || 'https://picsum.photos/200'
|
||||
|
||||
function red() {
|
||||
window.location.href = '/arcade/showcase/project/' + id + '/edit'
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.card}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
{personal && isHovered && (
|
||||
<button className={styles.deleteButton}
|
||||
onClick={handleDelete}>Delete</button>
|
||||
)}
|
||||
<a href={`/arcade/showcase/project/${id}`} className={styles.linkWrapper} target="_blank" rel="noopener noreferrer">
|
||||
className={styles.card}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
{/* attempt to make blob... not working rn */}
|
||||
{/* <div sx={{
|
||||
background: 'black',
|
||||
clipPath: `
|
||||
path('M36.8,-68.8C45.8,-58.6,49.9,-44.9,51.7,-32.8C53.5,-20.8,53.1,-10.4,56.4,1.9C59.6,14.2,66.6,28.3,63.8,38.6C60.9,48.9,48.3,55.3,36,62.2C23.8,69.1,11.9,76.4,-1.7,79.4C-15.3,82.3,-30.7,81,-38.4,71.6C-46.2,62.1,-46.5,44.5,-54,31.3C-61.4,18,-76.2,9,-78.4,-1.3C-80.6,-11.5,-70.2,-23.1,-63.1,-36.9C-55.9,-50.7,-51.9,-66.8,-41.9,-76.4C-31.9,-86.1,-15.9,-89.3,-1,-87.6C13.9,-85.8,27.8,-79.1,36.8,-68.8Z')
|
||||
`,
|
||||
width: '130%',
|
||||
height: '400px',
|
||||
transform: "translate(-50%, -50%) scale(1.5)",
|
||||
}}>
|
||||
|
||||
</div> */}
|
||||
{personal && isHovered && (
|
||||
<div
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: '10px',
|
||||
left: '10px',
|
||||
display: 'flex',
|
||||
gap: '5px'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
as="a"
|
||||
onClick={() => red()}
|
||||
sx={{
|
||||
color: 'white',
|
||||
bg: '#09AFB4',
|
||||
borderRadius: '10px',
|
||||
height: '32px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
<Icon glyph="edit" />{' '}
|
||||
</div>
|
||||
<div
|
||||
onClick={handleDelete}
|
||||
sx={{
|
||||
color: 'white',
|
||||
bg: '#09AFB4',
|
||||
borderRadius: '10px',
|
||||
height: '32px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
<Icon glyph="minus" />{' '}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<a
|
||||
href={`/arcade/showcase/project/${id}`}
|
||||
className={styles.linkWrapper}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
src={images[0] || "https://picsum.photos/200"}
|
||||
alt="Project Image"
|
||||
className={styles.card_img}
|
||||
src={images[0] || 'https://picsum.photos/200'}
|
||||
alt="Project Image"
|
||||
className={styles.card_img}
|
||||
/>
|
||||
<h1 className={styles.card_title}>{title}</h1>
|
||||
<p className={styles.card_description}>{desc}</p>
|
||||
</a>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CohortCard
|
||||
export default CohortCard
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
flex-direction: column;
|
||||
align-items: left;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,24 +5,23 @@
|
|||
overflow-x: hidden;
|
||||
align-self: center;
|
||||
display: grid;
|
||||
grid-gap: 0px;
|
||||
background-color: #FAEFD6;
|
||||
grid-gap: 20px;
|
||||
padding: 10px;
|
||||
margin: auto;
|
||||
|
||||
/* Small screens */
|
||||
@media (min-width: 640px) {
|
||||
grid-template-columns: repeat(4, 1fr); /* 4 equal-width columns */
|
||||
grid-template-columns: repeat(3, 1fr); /* 4 equal-width columns */
|
||||
}
|
||||
|
||||
/* Medium screens */
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: repeat(5, 1fr); /* 5 equal-width columns */
|
||||
grid-template-columns: repeat(4, 1fr); /* 5 equal-width columns */
|
||||
}
|
||||
|
||||
/* Large screens */
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: repeat(6, 1fr); /* 6 equal-width columns */
|
||||
grid-template-columns: repeat(5, 1fr); /* 6 equal-width columns */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const NewProjectForm = ({authToken}) => {
|
|||
<div>
|
||||
<form {...formProps}>
|
||||
<Label>
|
||||
<Text>Repo / code link</Text>
|
||||
<Text className='slackey'>Repo / code link</Text>
|
||||
<Text color="muted">We'll pull in your project details from this repo</Text>
|
||||
<Input
|
||||
{...useField('codeLink')}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Input, Label, Text, Flex, Box } from 'theme-ui'
|
||||
import { Input, Label, Text, Flex, Box, Grid } from 'theme-ui'
|
||||
import ProjectView from './project-view'
|
||||
import useForm from '../../../lib/use-form'
|
||||
import CohortCard from './cohort-card'
|
||||
|
|
@ -7,7 +7,7 @@ import { useState } from 'react'
|
|||
import Icon from '@hackclub/icons'
|
||||
const ProjectEditForm = ({ project }) => {
|
||||
const [previewProject, setPreviewProject] = useState(project)
|
||||
console.log({previewProject})
|
||||
console.log({ previewProject })
|
||||
function publishedChanges(e) {
|
||||
console.log('published changes')
|
||||
}
|
||||
|
|
@ -22,70 +22,129 @@ const ProjectEditForm = ({ project }) => {
|
|||
)
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
width: '90vw',
|
||||
maxWidth: '800px',
|
||||
margin: 'auto'
|
||||
}}>
|
||||
<Text variant='subtitle' className='slackey' as='h3' sx={{textAlign: 'center', display: 'flex', width: '100%', mb: 2, color: '#333'}}><Icon glyph='edit' />Editing PROJECT NAME</Text>
|
||||
<Flex className='gaegu' sx={{backgroundColor: '#F4E7C7', p: 4, borderRadius: '10px'}}>
|
||||
<form {...formProps}>
|
||||
<Label>
|
||||
<Text>Project name</Text>
|
||||
<Input
|
||||
{...useField('title')}
|
||||
placeholder="Arcade"
|
||||
sx={{ border: '1px dashed', borderColor: '#09AFB4', mb: 2 }}
|
||||
/>
|
||||
</Label>
|
||||
<Label>
|
||||
<Text>Repo Link</Text>
|
||||
<Input
|
||||
{...useField('codeLink')}
|
||||
placeholder="https://github.com/hackclub/arcade"
|
||||
sx={{ border: '1px solid', borderColor: 'muted', mb: 2 }}
|
||||
/>
|
||||
</Label>
|
||||
<Label>
|
||||
<Text>Play Link</Text>
|
||||
<Input
|
||||
{...useField('playLink')}
|
||||
placeholder="https://hackclub.com/arcade"
|
||||
sx={{ border: '1px solid', borderColor: 'muted', mb: 2 }}
|
||||
/>
|
||||
</Label>
|
||||
<Label>
|
||||
<Text>Screenshot</Text>
|
||||
<Input
|
||||
{...useField('screenshot')}
|
||||
sx={{ border: '1px solid', borderColor: 'muted', mb: 2 }}
|
||||
/>
|
||||
</Label>
|
||||
<Label>
|
||||
<Text>Video</Text>
|
||||
<Input
|
||||
{...useField('video')}
|
||||
sx={{ border: '1px solid', borderColor: 'muted', mb: 2 }}
|
||||
/>
|
||||
</Label>
|
||||
<Box
|
||||
sx={{
|
||||
width: '90vw',
|
||||
maxWidth: '1200px',
|
||||
margin: 'auto',
|
||||
position: 'relative',
|
||||
my: 4
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
className="slackey"
|
||||
as="h3"
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
mb: 2,
|
||||
color: '#333',
|
||||
}}
|
||||
>
|
||||
<Icon glyph="edit" />
|
||||
Editing {project.title} details
|
||||
</Text>
|
||||
<Text
|
||||
as="a"
|
||||
href="/arcade/showcase/my"
|
||||
sx={{
|
||||
border: '2px dashed #333',
|
||||
borderRadius: '5px',
|
||||
position: ['relative', 'relative', 'absolute'],
|
||||
display: 'flex',
|
||||
right: 0,
|
||||
top: 0,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
px: 2,
|
||||
py: 1,
|
||||
transitionDuration: '0.4s',
|
||||
cursor: 'pointer',
|
||||
textDecoration: 'none',
|
||||
mb: 3,
|
||||
'&:hover': {
|
||||
background: '#333',
|
||||
color: '#F4E7C7'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon glyph="home" /> View all my ships
|
||||
</Text>
|
||||
<Grid
|
||||
className="gaegu"
|
||||
sx={{
|
||||
backgroundColor: '#F4E7C7',
|
||||
p: 4,
|
||||
borderRadius: '10px',
|
||||
gridTemplateColumns: ['1fr', '1fr 2fr']
|
||||
}}
|
||||
>
|
||||
<form {...formProps}>
|
||||
<Label>
|
||||
<Text>Project name</Text>
|
||||
<Input
|
||||
{...useField('title')}
|
||||
placeholder="Arcade"
|
||||
sx={{ border: '1px dashed', borderColor: '#09AFB4', mb: 2 }}
|
||||
/>
|
||||
</Label>
|
||||
<Label>
|
||||
<Text>Repo Link</Text>
|
||||
<Input
|
||||
{...useField('codeLink')}
|
||||
placeholder="https://github.com/hackclub/arcade"
|
||||
sx={{ border: '1px dashed', borderColor: '#09AFB4', mb: 2 }}
|
||||
/>
|
||||
</Label>
|
||||
<Label>
|
||||
<Text>Play Link</Text>
|
||||
<Input
|
||||
{...useField('playLink')}
|
||||
placeholder="https://hackclub.com/arcade"
|
||||
sx={{ border: '1px dashed', borderColor: '#09AFB4', mb: 2 }}
|
||||
/>
|
||||
</Label>
|
||||
<Label>
|
||||
<Text>Screenshot</Text>
|
||||
<Input
|
||||
{...useField('screenshot')}
|
||||
sx={{ border: '1px dashed', borderColor: '#09AFB4', mb: 2 }}
|
||||
/>
|
||||
</Label>
|
||||
<Label>
|
||||
<Text>Video</Text>
|
||||
<Input
|
||||
{...useField('video')}
|
||||
sx={{ border: '1px dashed', borderColor: '#09AFB4', mb: 2 }}
|
||||
/>
|
||||
</Label>
|
||||
|
||||
<Input {...useField('authToken')} type="hidden" />
|
||||
<Input {...useField('authToken')} type="hidden" />
|
||||
|
||||
<Submit
|
||||
status={status}
|
||||
labels={{
|
||||
default: 'Publish changes',
|
||||
error: 'Something went wrong',
|
||||
success: 'Updated!'
|
||||
<Submit
|
||||
status={status}
|
||||
labels={{
|
||||
default: 'Publish changes',
|
||||
error: 'Something went wrong',
|
||||
success: 'Updated!'
|
||||
}}
|
||||
sx={{
|
||||
borderRadius: '10px'
|
||||
}}
|
||||
/>
|
||||
</form>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: '#FAEFD6',
|
||||
border: '2px dashed #09AFB4',
|
||||
borderRadius: '5px'
|
||||
}}
|
||||
|
||||
sx={{backgroundColor: '#09AFB4', borderRadius: '10px'}}
|
||||
/>
|
||||
</form>
|
||||
<Box sx={{px: 3}}>
|
||||
<ProjectView {...previewProject}/>
|
||||
</Box>
|
||||
</Flex>
|
||||
>
|
||||
<ProjectView {...previewProject} />
|
||||
</Box>
|
||||
</Grid>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,41 +2,98 @@ import styles from './project-view.module.css'
|
|||
import { Button } from 'theme-ui'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
|
||||
const ProjectView = ({ id, title = "Title Not Found", desc = "Description Not Found", slack = "Slack Not Found", scrapbook = "", playLink, images = [], githubProf, user="User Not Found", codeLink = "", ...props}) => {
|
||||
const codeHost = codeLink.includes('github') ? 'View on GitHub' : 'View project source'
|
||||
const ProjectView = ({
|
||||
id,
|
||||
title = 'Title Not Found',
|
||||
desc = 'Description Not Found',
|
||||
slack = 'Slack Not Found',
|
||||
scrapbook = '',
|
||||
playLink,
|
||||
images = [],
|
||||
githubProf,
|
||||
user = 'User Not Found',
|
||||
codeLink = '',
|
||||
...props
|
||||
}) => {
|
||||
const codeHost = codeLink.includes('github')
|
||||
? 'View on GitHub'
|
||||
: 'View project source'
|
||||
return (
|
||||
<div {...props} className='gaegu'>
|
||||
<div sx={{py: 5, backgroundColor: "#F4E7C7"}}>
|
||||
<h1 className='slackey'>{title}</h1>
|
||||
<h3>By {user}</h3>
|
||||
<div {...props} className="gaegu" sx={{ position: 'relative' }}>
|
||||
<div sx={{ py: 4, backgroundColor: '#F4E7C7', textAlign: 'center' }}>
|
||||
<h1 className="slackey">{title}</h1>
|
||||
<h3>By {user}</h3>
|
||||
</div>
|
||||
|
||||
<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} sx={{width: '90%', margin:'auto', mb: 3}}>{desc}</p>
|
||||
|
||||
<div className={styles.buttonGroup} sx={{width: '90%', margin:'auto'}}>
|
||||
{/* {playLink && ( */}
|
||||
<Button
|
||||
as="a"
|
||||
sx={{ backgroundColor: '#FF5C00', color: '#ebebeb', textSizeAdjust: "16px", borderRadius: '10px' }}
|
||||
href={playLink}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Play Game
|
||||
</Button>
|
||||
{/* )} */}
|
||||
<div
|
||||
sx={{
|
||||
width: '90%',
|
||||
margin: 'auto',
|
||||
my: 3,
|
||||
maxWidth: '800px',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: images.length > 0 ? images.length > 1 ? '1fr' : ['1fr', '1fr 1fr'] : '',
|
||||
gap: '20px'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
sx={{
|
||||
display: 'grid',
|
||||
flexWrap: 'wrap',
|
||||
gridTemplateColumns: images > 1 ? ['1fr', '1fr 1fr', '1fr 1fr 1fr'] : '1fr'
|
||||
}}
|
||||
>
|
||||
{images.map((image, index) => (
|
||||
<div
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<img
|
||||
key={index}
|
||||
src={image}
|
||||
alt={`Project image ${index + 1}`}
|
||||
className={styles.image}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
<p className={styles.description} sx={{textAlign: images.length != 1 ? 'center' : 'left'}}>{desc}</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={styles.buttonGroup}
|
||||
sx={{ width: '90%', margin: 'auto', my: 3 }}
|
||||
>
|
||||
{playLink && (
|
||||
<Button
|
||||
as="a"
|
||||
sx={{
|
||||
backgroundColor: '#FF5C00',
|
||||
color: '#ebebeb',
|
||||
textSizeAdjust: '16px',
|
||||
borderRadius: '10px'
|
||||
}}
|
||||
href={playLink}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Play Game
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
as="a"
|
||||
sx={{ backgroundColor: '#09AFB4', color: '#ebebeb', textSizeAdjust: "16px", borderRadius: '10px' }}
|
||||
sx={{
|
||||
backgroundColor: '#09AFB4',
|
||||
color: '#ebebeb',
|
||||
textSizeAdjust: '16px',
|
||||
borderRadius: '10px'
|
||||
}}
|
||||
href={codeLink}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
|
|
|
|||
|
|
@ -12,19 +12,13 @@
|
|||
color: #333;
|
||||
}
|
||||
|
||||
.imageGallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
width: 780px; /* Adjust the width to fit three images */
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1.2rem;
|
||||
|
|
@ -62,6 +56,7 @@
|
|||
font-size: 2.5rem;
|
||||
font-weight: 800px;
|
||||
margin-bottom: 20px;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
import ProjectAddView from '../../../components/arcade/showcase/project-add'
|
||||
|
||||
const AddProjectPage = () => {
|
||||
return (
|
||||
<section>
|
||||
<h1>Add a project</h1>
|
||||
<ProjectAddView />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddProjectPage
|
||||
|
|
@ -71,23 +71,31 @@ const ProjectGallery = ({ projects, loadProjects}) => {
|
|||
rel="noopener"
|
||||
className="gaegu"
|
||||
sx={{
|
||||
backgroundColor: '#09AFB4',
|
||||
border: '3px dashed #09AFB4',
|
||||
my: 2,
|
||||
display: 'flex',
|
||||
color: '#FAEFD6',
|
||||
color: '#09AFB4',
|
||||
borderRadius: '10px',
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
textDecoration: 'none',
|
||||
textAlign: 'center',
|
||||
py: 2
|
||||
py: 2,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
transitionDuration: '0.4s',
|
||||
'&:hover': {
|
||||
background: '#09AFB4',
|
||||
color: '#F4E7C7'
|
||||
}
|
||||
}}
|
||||
onClick={e => {
|
||||
document.getElementById('add-project').showModal()
|
||||
}}
|
||||
>
|
||||
<Icon glyph="plus" sx={{ margin: 'auto' }} />
|
||||
<Icon glyph="plus" sx={{ marginX: 'auto' }} />
|
||||
<Text variant="subtitle" sx={{ mt: 0 }}>
|
||||
Add a Project
|
||||
</Text>
|
||||
|
|
@ -112,9 +120,9 @@ const ProjectGallery = ({ projects, loadProjects}) => {
|
|||
)
|
||||
}
|
||||
|
||||
const Loading = () => <div>Loading...</div>
|
||||
const Loading = () => <div sx={{width: '90vw', maxWidth: '1200px', margin: 'auto', textAlign: 'center'}}>Loading...</div>
|
||||
|
||||
const ErrorMessage = () => <div>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 [projects, setProjects] = useState([])
|
||||
|
|
@ -152,7 +160,7 @@ const my = () => {
|
|||
// Render a countdown
|
||||
return (
|
||||
<span sx={{ color: '#FF5C00' }}>
|
||||
First Voting round in {hours > 0 ? `${hours} hours` : ''}{' '}
|
||||
First voting round in {hours > 0 ? `${hours} hours` : ''}{' '}
|
||||
{minutes > 0 ? `${minutes} minutes` : ''} {seconds} seconds
|
||||
</span>
|
||||
)
|
||||
|
|
@ -255,9 +263,9 @@ const my = () => {
|
|||
display: 'block'
|
||||
}}
|
||||
>
|
||||
<Text className="gaegu" sx={{ color: '#09AFB4' }}>
|
||||
{' '}
|
||||
Welcome, {name}
|
||||
<Text className="gaegu" sx={{ color: '#FF5C00' }}>
|
||||
{status == 'success' ? `Welcome, ${projects.user}` : ''}
|
||||
|
||||
</Text>
|
||||
|
||||
<div>
|
||||
|
|
@ -273,20 +281,6 @@ const my = () => {
|
|||
Your Ships
|
||||
</Text>
|
||||
</div>
|
||||
{/* <div className={styles.container}>
|
||||
<Button
|
||||
as="a"
|
||||
href="/arcade/showcase/add"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
className="gaegu"
|
||||
sx={{ backgroundColor: '#09AFB4', my: 2 }}
|
||||
>
|
||||
<Icon glyph="plus" />
|
||||
Add a Project
|
||||
</Button>
|
||||
</div> */}
|
||||
|
||||
<div
|
||||
sx={{
|
||||
display: 'flex',
|
||||
|
|
@ -304,7 +298,6 @@ const my = () => {
|
|||
{status == 'error' && <ErrorMessage />}
|
||||
|
||||
{status == 'success' && <ProjectGallery projects={projects} loadProjects={loadProjects} />}
|
||||
<ProjectGallery projects={projects} />
|
||||
<dialog id="add-project" sx={{borderRadius: '10px', border: '3px dashed #09AFB4'}} className='gaegu'>
|
||||
<ProjectAddView />
|
||||
<Close
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ body, html {
|
|||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
`
|
||||
|
||||
const Loading = () => <p>Loading...</p>
|
||||
|
|
@ -78,16 +79,7 @@ export default ({ projectID }) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<img
|
||||
src="https://cloud-677i45opw-hack-club-bot.vercel.app/0arcade_1.png"
|
||||
sx={{
|
||||
width: '30%',
|
||||
maxWidth: '200px',
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
right: '20px'
|
||||
}}
|
||||
/>
|
||||
|
||||
<Box
|
||||
id="spotlight"
|
||||
as="section"
|
||||
|
|
@ -125,6 +117,16 @@ export default ({ projectID }) => {
|
|||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="https://cloud-677i45opw-hack-club-bot.vercel.app/0arcade_1.png"
|
||||
sx={{
|
||||
width: '30%',
|
||||
maxWidth: '200px',
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
right: '20px'
|
||||
}}
|
||||
/>
|
||||
{status === 'loading' && <Loading />}
|
||||
{status === 'error' && <ErrorMsg />}
|
||||
{status === 'success' && <ProjectEditView project={project} />}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ 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 styles from '../../../components/arcade/showcase/project-view.module.css'
|
||||
import styles from '../../../../../components/arcade/showcase/project-view.module.css'
|
||||
import { Box } from 'theme-ui'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
|
|
@ -33,38 +33,39 @@ a {
|
|||
}
|
||||
`
|
||||
|
||||
const ProjectShowPage = ({projectID}) => {
|
||||
const ProjectShowPage = ({ projectID }) => {
|
||||
const Loading = () => <div className={styles.loading}>Loading...</div>
|
||||
|
||||
const Loading = () => (<div className={styles.loading}>Loading...</div>)
|
||||
|
||||
const ErrorMessage = () => (<div>There was an error loading your projects.</div>)
|
||||
const ErrorMessage = () => (
|
||||
<div>There was an error loading your projects.</div>
|
||||
)
|
||||
|
||||
const [project, setProject] = useState([])
|
||||
const [status, setStatus] = useState('loading')
|
||||
const [errorMsg, setError] = useState(null)
|
||||
// Spotlight effect
|
||||
const spotlightRef = useRef()
|
||||
useEffect(() => {
|
||||
const handler = event => {
|
||||
var rect = document.getElementById('spotlight').getBoundingClientRect()
|
||||
var x = event.clientX - rect.left //x position within the element.
|
||||
var y = event.clientY - rect.top //y position within the element.
|
||||
|
||||
spotlightRef.current.style.background = `radial-gradient(
|
||||
// Spotlight effect
|
||||
const spotlightRef = useRef()
|
||||
useEffect(() => {
|
||||
const handler = event => {
|
||||
var rect = document.getElementById('spotlight').getBoundingClientRect()
|
||||
var x = event.clientX - rect.left //x position within the element.
|
||||
var y = event.clientY - rect.top //y position within the element.
|
||||
|
||||
spotlightRef.current.style.background = `radial-gradient(
|
||||
circle at ${x}px ${y}px,
|
||||
rgba(132, 146, 166, 0) 20px,
|
||||
rgba(250, 239, 214, 0.9) 120px
|
||||
)`
|
||||
}
|
||||
window.addEventListener('mousemove', handler)
|
||||
return () => window.removeEventListener('mousemove', handler)
|
||||
}, [])
|
||||
}
|
||||
window.addEventListener('mousemove', handler)
|
||||
return () => window.removeEventListener('mousemove', handler)
|
||||
}, [])
|
||||
useEffect(async () => {
|
||||
const token = window.localStorage.getItem('arcade.authToken')
|
||||
const response = await fetch(`/api/arcade/showcase/projects/${projectID}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
Authorization: `Bearer ${token}`
|
||||
}
|
||||
}).catch(e => {
|
||||
console.error(e)
|
||||
|
|
@ -79,50 +80,49 @@ const ProjectShowPage = ({projectID}) => {
|
|||
setProject(data.project)
|
||||
setStatus('success')
|
||||
}
|
||||
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Box
|
||||
id="spotlight"
|
||||
as="section"
|
||||
sx={{
|
||||
backgroundImage: `
|
||||
id="spotlight"
|
||||
as="section"
|
||||
sx={{
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(250, 239, 214, 0.7), rgba(250, 239, 214, 0.7)),
|
||||
url('https://cloud-o19rieg4g-hack-club-bot.vercel.app/0group_495__1_.svg')
|
||||
`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
position: 'relative',
|
||||
minHeight: '100vh'
|
||||
backgroundSize: 'cover',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
position: 'relative',
|
||||
minHeight: '100vh'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
ref={spotlightRef}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
zIndex: 2,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
bg: '#FAEFD6',
|
||||
pointerEvents: 'none'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
ref={spotlightRef}
|
||||
/>
|
||||
<div sx={{ zIndex: 5, position: 'relative' }}>
|
||||
<img
|
||||
src="https://cloud-677i45opw-hack-club-bot.vercel.app/0arcade_1.png"
|
||||
sx={{
|
||||
width: '30%',
|
||||
maxWidth: '200px',
|
||||
position: 'absolute',
|
||||
zIndex: 2,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
bg: '#FAEFD6',
|
||||
pointerEvents: 'none'
|
||||
top: '20px',
|
||||
right: '20px'
|
||||
}}
|
||||
/>
|
||||
<div sx={{zIndex: 5, position: 'relative'}}>
|
||||
<img
|
||||
src="https://cloud-677i45opw-hack-club-bot.vercel.app/0arcade_1.png"
|
||||
sx={{
|
||||
width: '30%',
|
||||
maxWidth: '200px',
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
right: '20px'
|
||||
}}
|
||||
/>
|
||||
<div className={styles.min}>
|
||||
{/* {
|
||||
<div className={styles.min}>
|
||||
{
|
||||
status == 'loading' && <Loading />
|
||||
}
|
||||
|
||||
|
|
@ -142,23 +142,12 @@ const ProjectShowPage = ({projectID}) => {
|
|||
playLink={project.playLink}
|
||||
images={project.images}
|
||||
githubProf={project.githubProf}
|
||||
user={project.user}
|
||||
/>
|
||||
} */}
|
||||
|
||||
<ProjectView
|
||||
key={project.id}
|
||||
id={project.id}
|
||||
title={project.title}
|
||||
desc={project.desc}
|
||||
slack={project.slackLink}
|
||||
codeLink={project.codeLink}
|
||||
playLink={project.playLink}
|
||||
images={project.images}
|
||||
githubProf={project.githubProf}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>{styled}</style>
|
||||
<style>{styled}</style>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
|
@ -167,5 +156,5 @@ export default ProjectShowPage
|
|||
|
||||
export function getServerSideProps(context) {
|
||||
const { projectID } = context.query
|
||||
return { props: { "hi": 'HI' } }
|
||||
}
|
||||
return { props: { projectID } }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue