mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
styling
This commit is contained in:
Belle
parent
e7bd3efbd7
commit
02a6eb4926
14 changed files with 568 additions and 135 deletions
|
|
@ -1,5 +1,6 @@
|
|||
.feed {
|
||||
width: 100%;
|
||||
width: 90vw;
|
||||
max-width: 1200px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
align-self: center;
|
||||
|
|
@ -7,6 +8,7 @@
|
|||
grid-gap: 0px;
|
||||
background-color: #FAEFD6;
|
||||
padding: 10px;
|
||||
margin: auto;
|
||||
|
||||
/* Small screens */
|
||||
@media (min-width: 640px) {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const ErrorMsg = () => <div>There was an error loading your projects.</div>
|
|||
async function projectAdded(response) {
|
||||
const projectID = response.project
|
||||
|
||||
window.location.href = '/arcade/showcase/project/' + projectID
|
||||
window.location.href = '/arcade/showcase/project/' + projectID + '/edit'
|
||||
}
|
||||
|
||||
const NewProjectForm = ({authToken}) => {
|
||||
|
|
@ -37,9 +37,13 @@ const NewProjectForm = ({authToken}) => {
|
|||
status={status}
|
||||
labels={{
|
||||
default: 'Submit repo',
|
||||
error: 'Something went wrong',
|
||||
error: 'Something went wrong!',
|
||||
success: 'Pulling repo data'
|
||||
}}
|
||||
sx={{
|
||||
background: status == 'error' ? '#DE4E2B': '#09AFB4',
|
||||
borderRadius: '10px'
|
||||
}}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import useForm from '../../../lib/use-form'
|
|||
import CohortCard from './cohort-card'
|
||||
import Submit from '../../submit'
|
||||
import { useState } from 'react'
|
||||
|
||||
import Icon from '@hackclub/icons'
|
||||
const ProjectEditForm = ({ project }) => {
|
||||
const [previewProject, setPreviewProject] = useState(project)
|
||||
console.log({previewProject})
|
||||
|
|
@ -22,14 +22,20 @@ const ProjectEditForm = ({ project }) => {
|
|||
)
|
||||
console.log()
|
||||
return (
|
||||
<Flex>
|
||||
<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 solid', borderColor: 'muted', mb: 2 }}
|
||||
sx={{ border: '1px dashed', borderColor: '#09AFB4', mb: 2 }}
|
||||
/>
|
||||
</Label>
|
||||
<Label>
|
||||
|
|
@ -72,13 +78,15 @@ const ProjectEditForm = ({ project }) => {
|
|||
error: 'Something went wrong',
|
||||
success: 'Updated!'
|
||||
}}
|
||||
|
||||
sx={{backgroundColor: '#09AFB4', borderRadius: '10px'}}
|
||||
/>
|
||||
</form>
|
||||
<Box sx={{ width: '50%' }}>
|
||||
<CohortCard {...previewProject} />
|
||||
<ProjectView {...previewProject} />
|
||||
<Box sx={{px: 3}}>
|
||||
<ProjectView {...previewProject}/>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
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, codeLink = ""}) => {
|
||||
const codeHost = codeLink.includes('github') ? 'View on GitHub' : 'View code link'
|
||||
|
||||
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 className={styles.container}>
|
||||
<h1 className={styles.title}>{title}</h1>
|
||||
<div {...props} className='gaegu'>
|
||||
<div sx={{py: 5, backgroundColor: "#F4E7C7"}}>
|
||||
<h1 className='slackey'>{title}</h1>
|
||||
<h3>By {user}</h3>
|
||||
</div>
|
||||
|
||||
<div className={styles.imageGallery}>
|
||||
{images.map((image, index) => (
|
||||
|
|
@ -13,24 +18,25 @@ const ProjectView = ({ id, title = "Title Not Found", desc = "Description Not Fo
|
|||
))}
|
||||
</div>
|
||||
|
||||
<p className={styles.description}>{desc}</p>
|
||||
<p className={styles.description} sx={{width: '90%', margin:'auto', mb: 3}}>{desc}</p>
|
||||
|
||||
<div className={styles.buttonGroup}>
|
||||
{playLink && (
|
||||
<div className={styles.buttonGroup} sx={{width: '90%', margin:'auto'}}>
|
||||
{/* {playLink && ( */}
|
||||
<Button
|
||||
as="a"
|
||||
sx={{ backgroundColor: '#1d571d', color: '#ebebeb', textSizeAdjust: "16px" }}
|
||||
sx={{ backgroundColor: '#FF5C00', color: '#ebebeb', textSizeAdjust: "16px", borderRadius: '10px' }}
|
||||
href={playLink}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Play Game
|
||||
</Button>)}
|
||||
</Button>
|
||||
{/* )} */}
|
||||
|
||||
|
||||
<Button
|
||||
as="a"
|
||||
sx={{ backgroundColor: '#0f0f0f', color: '#ebebeb', textSizeAdjust: "16px" }}
|
||||
sx={{ backgroundColor: '#09AFB4', color: '#ebebeb', textSizeAdjust: "16px", borderRadius: '10px' }}
|
||||
href={codeLink}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
|
|
|
|||
|
|
@ -56,11 +56,17 @@
|
|||
.min{
|
||||
min-height: 800px;
|
||||
text-align: center;
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.loading{
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.buttonGroup {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
@ -60,6 +60,7 @@
|
|||
"nextjs-current-url": "^1.0.3",
|
||||
"openai": "^4.42.0",
|
||||
"pcb-stackup": "^4.2.8",
|
||||
"rc-dialog": "^9.5.2",
|
||||
"react": "^17.0.2",
|
||||
"react-before-after-slider-component": "^1.1.8",
|
||||
"react-countdown": "^2.3.6",
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ export default async function handler(req, res) {
|
|||
playLink: project.fields['Play Link'] || '',
|
||||
images: (project.fields['Screenshot'] || []).map(i => i.url),
|
||||
githubProf: project.fields['Github Profile'] || '',
|
||||
user: user.fields['Name'],
|
||||
deleted: project.fields['deleted'] || ''
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ export default async function handler(req, res) {
|
|||
slackLink: project.fields['Slack Link'] || '',
|
||||
playLink: project.fields['Play Link'] || '',
|
||||
images: (project.fields['Screenshot'] || []).map(i => i.url),
|
||||
user: user.fields['Name'],
|
||||
githubProf: project.fields['Github Profile'] || ''
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,8 @@ export default async function handler(req, res) {
|
|||
slackLink: p.fields['Slack Link'] || '',
|
||||
playLink: p.fields['Play Link'] || '',
|
||||
images: (p.fields['Screenshot'] || []).map(i => i.url),
|
||||
githubProf: p.fields['Github Profile'] || ''
|
||||
githubProf: p.fields['Github Profile'] || '',
|
||||
user: user.fields['Name']
|
||||
}))
|
||||
return res.status(200).json({ project: results[0] })
|
||||
}
|
||||
|
|
@ -26,7 +26,8 @@ export default async function handler(req, res) {
|
|||
slackLink: p.fields['Slack Link'] || '',
|
||||
playLink: p.fields['Play Link'] || '',
|
||||
images: (p.fields['Screenshot'] || []).map(i => i.url),
|
||||
githubProf: p.fields['Github Profile'] || ''
|
||||
githubProf: p.fields['Github Profile'] || '',
|
||||
user: user.fields['Name']
|
||||
}))
|
||||
return res.status(200).json({ projects: results })
|
||||
}
|
||||
|
|
@ -1,23 +1,97 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { useEffect, useState, useRef } 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/arcade/homeBG.svg'
|
||||
import { Button, Heading, Text } from 'theme-ui'
|
||||
import { Button, Heading, Text, Box, Close } from 'theme-ui'
|
||||
import SlideDown from '../../../components/slide-down'
|
||||
import styles from '../../../components/arcade/showcase/my.module.css'
|
||||
import Countdown from 'react-countdown';
|
||||
import Countdown from 'react-countdown'
|
||||
import { StyleSheetContext } from 'styled-components'
|
||||
import Icon from '@hackclub/icons'
|
||||
import Flag from '../../../components/flag'
|
||||
import ProjectAddView from '../../../components/arcade/showcase/project-add'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
const styled = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Slackey&family=Emblema+One&family=Gaegu&display=swap');
|
||||
body, html {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.slackey {
|
||||
font-family: "Slackey", sans-serif;
|
||||
}
|
||||
.emblema {
|
||||
font-family: "Emblema One", system-ui;
|
||||
}
|
||||
|
||||
.gaegu {
|
||||
font-family: "Gaegu", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #FAEFD6;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
|
||||
from,
|
||||
to {
|
||||
transform: translate(0%, -37%) rotate(-2deg);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(-2%, -40%) rotate(2deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(0%, -43%) rotate(-1deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(-1%, -40%) rotate(-1deg);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
`
|
||||
|
||||
const ProjectGallery = ({ projects }) => {
|
||||
|
||||
return (
|
||||
<div className={styles.feed}>
|
||||
<div className={styles.container}>
|
||||
<Box
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
className="gaegu"
|
||||
sx={{
|
||||
backgroundColor: '#09AFB4',
|
||||
my: 2,
|
||||
display: 'flex',
|
||||
color: '#FAEFD6',
|
||||
borderRadius: '10px',
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
textDecoration: 'none',
|
||||
textAlign: 'center',
|
||||
py: 2
|
||||
}}
|
||||
onClick={e => {
|
||||
document.getElementById('add-project').showModal()
|
||||
}}
|
||||
>
|
||||
<Icon glyph="plus" sx={{ margin: 'auto' }} />
|
||||
<Text variant="subtitle" sx={{ mt: 0 }}>
|
||||
Add a Project
|
||||
</Text>
|
||||
</Box>
|
||||
</div>
|
||||
{projects.map(project => (
|
||||
<CohortCard
|
||||
key={project.id}
|
||||
|
|
@ -29,31 +103,83 @@ const ProjectGallery = ({ projects }) => {
|
|||
playLink={project.playLink}
|
||||
images={project.images}
|
||||
githubProf={project.githubProf}
|
||||
personal={true}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
const Loading = () => (<div>Loading...</div>)
|
||||
const Loading = () => <div>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 my = () => {
|
||||
const [projects, setProjects] = useState([])
|
||||
const [name, setName] = useState('')
|
||||
const [status, setStatus] = useState('loading')
|
||||
const [errorMsg, setError] = useState(null)
|
||||
|
||||
const launchDate = new Date(2024, 7, 19, 0, 0, 0, 0)
|
||||
|
||||
const launchDate = new Date(2024, 7, 19, 0, 0, 0, 0);
|
||||
const renderer = ({ hours, minutes, seconds, completed }) => {
|
||||
if (completed) {
|
||||
// Render a completed state
|
||||
return (
|
||||
<div sx={{ width: '100%' }}>
|
||||
<Button
|
||||
sx={{
|
||||
backgroundColor: '#FF5C00',
|
||||
color: '#FAEFD6',
|
||||
borderRadius: '5px',
|
||||
border: 'none',
|
||||
px: '20px',
|
||||
transitionDuration: '0.3s',
|
||||
'&:hover': {
|
||||
transform: 'scale(1.05)'
|
||||
},
|
||||
width: 'fit-content'
|
||||
}}
|
||||
className="gaegy"
|
||||
>
|
||||
Click here to vote now
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
// Render a countdown
|
||||
return (
|
||||
<span sx={{ color: '#FF5C00' }}>
|
||||
First Voting round in {hours > 0 ? `${hours} hours` : ''}{' '}
|
||||
{minutes > 0 ? `${minutes} minutes` : ''} {seconds} seconds
|
||||
</span>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// 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)
|
||||
}, [])
|
||||
|
||||
useEffect(async () => {
|
||||
const token = window.localStorage.getItem('arcade.authToken')
|
||||
const response = await fetch('/api/arcade/showcase/projects/my', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
Authorization: `Bearer ${token}`
|
||||
}
|
||||
}).catch(e => {
|
||||
console.error(e)
|
||||
|
|
@ -66,84 +192,134 @@ const my = () => {
|
|||
return
|
||||
} else {
|
||||
setProjects(data.projects)
|
||||
setName(data.name)
|
||||
setStatus('success')
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<section>
|
||||
<Nav color="dark" />
|
||||
<BGImg
|
||||
src={background}
|
||||
alt="Arcade Gallery BG Img"
|
||||
gradient='linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.2))'
|
||||
priority
|
||||
/>
|
||||
<div className={styles.title}>
|
||||
<SlideDown duration={768}>
|
||||
<Heading
|
||||
as="h1"
|
||||
variant="ultratitle"
|
||||
<Box
|
||||
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'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
ref={spotlightRef}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
zIndex: 2,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
bg: '#FAEFD6',
|
||||
pointerEvents: 'none'
|
||||
}}
|
||||
/>
|
||||
<div sx={{ zIndex: 5, position: 'relative' }}>
|
||||
<img
|
||||
src="https://cloud-677i45opw-hack-club-bot.vercel.app/0arcade_1.png"
|
||||
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
|
||||
width: '30%',
|
||||
maxWidth: '200px',
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
right: '20px'
|
||||
}}
|
||||
>
|
||||
<div className={styles.container}>
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
WebkitTextStroke: 'currentColor',
|
||||
WebkitTextStrokeWidth: ['2px', '3px'],
|
||||
color: 'black',
|
||||
}}
|
||||
>
|
||||
My Ships
|
||||
</Text>
|
||||
<div className={styles.timer_box}>
|
||||
<p className={styles.timer_text}>First Voting round in</p>
|
||||
|
||||
<Countdown date={launchDate} className={styles.countdown}/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div className={styles.container}>
|
||||
<Button
|
||||
as="a"
|
||||
variant="ctaLg"
|
||||
href="/arcade/showcase/add"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
/>
|
||||
<SlideDown duration={768}>
|
||||
<Heading
|
||||
sx={{
|
||||
maxWidth: ['90vw', 'copyUltra'],
|
||||
py: 5,
|
||||
zIndex: 1,
|
||||
mx: 'auto',
|
||||
textAlign: 'center',
|
||||
display: 'block'
|
||||
}}
|
||||
>
|
||||
Add a Project
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</Heading>
|
||||
</SlideDown>
|
||||
</div>
|
||||
{
|
||||
status == 'loading' && <Loading />
|
||||
}
|
||||
<Text className="gaegu" sx={{ color: '#09AFB4' }}>
|
||||
{' '}
|
||||
Welcome, {name}
|
||||
</Text>
|
||||
|
||||
{
|
||||
status == 'error' && <ErrorMessage />
|
||||
}
|
||||
<div>
|
||||
<Text
|
||||
as="h1"
|
||||
variant="title"
|
||||
className="slackey"
|
||||
sx={{
|
||||
color: '#FF5C00',
|
||||
mb: 3
|
||||
}}
|
||||
>
|
||||
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> */}
|
||||
|
||||
{
|
||||
status == 'success' && <ProjectGallery projects={projects} />
|
||||
}
|
||||
<Footer />
|
||||
<div
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
textAlign: 'center'
|
||||
}}
|
||||
className="gaegu"
|
||||
>
|
||||
<Countdown date={launchDate} renderer={renderer} />
|
||||
</div>
|
||||
</Heading>
|
||||
</SlideDown>
|
||||
{status == 'loading' && <Loading />}
|
||||
|
||||
{status == 'error' && <ErrorMessage />}
|
||||
|
||||
{status == 'success' && <ProjectGallery projects={projects} />}
|
||||
<ProjectGallery projects={projects} />
|
||||
<dialog id="add-project" sx={{borderRadius: '10px', border: '3px dashed #09AFB4'}} className='gaegu'>
|
||||
<ProjectAddView />
|
||||
<Close
|
||||
sx={{
|
||||
'&:hover': { cursor: 'pointer' },
|
||||
position: 'absolute',
|
||||
top: '10px',
|
||||
right: '10px',
|
||||
zIndex: 2,
|
||||
color: '#09AFB4'
|
||||
}}
|
||||
onClick={e => {
|
||||
document.getElementById('add-project').close()
|
||||
}}
|
||||
/>
|
||||
</dialog>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<style>{styled}</style>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default my
|
||||
export default my
|
||||
|
|
|
|||
|
|
@ -1,5 +1,33 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import ProjectEditView from "../../../../../components/arcade/showcase/project-edit";
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { Box } from 'theme-ui'
|
||||
import ProjectEditView from '../../../../../components/arcade/showcase/project-edit'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
const styled = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Slackey&family=Emblema+One&family=Gaegu&display=swap');
|
||||
body, html {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.slackey {
|
||||
font-family: "Slackey", sans-serif;
|
||||
}
|
||||
.emblema {
|
||||
font-family: "Emblema One", system-ui;
|
||||
}
|
||||
|
||||
.gaegu {
|
||||
font-family: "Gaegu", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #FAEFD6;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
`
|
||||
|
||||
const Loading = () => <p>Loading...</p>
|
||||
|
||||
|
|
@ -9,16 +37,33 @@ export default ({ projectID }) => {
|
|||
const [status, setStatus] = useState('loading')
|
||||
const [project, setProject] = 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(
|
||||
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)
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
const authToken = window.localStorage.getItem('arcade.authToken')
|
||||
fetch(`/api/arcade/showcase/projects/${projectID}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
Authorization: `Bearer ${authToken}`
|
||||
}
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
setProject(data.project)
|
||||
if (data.error) {
|
||||
throw new Error(data.error)
|
||||
|
|
@ -33,9 +78,59 @@ export default ({ projectID }) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
{status === 'loading' && <Loading />}
|
||||
{status === 'error' && <ErrorMsg />}
|
||||
{status === 'success' && <ProjectEditView project={project} /> }
|
||||
<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"
|
||||
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'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
ref={spotlightRef}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
zIndex: 2,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
bg: '#FAEFD6',
|
||||
pointerEvents: 'none'
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minHeight: '100vh',
|
||||
zIndex: 5,
|
||||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
{status === 'loading' && <Loading />}
|
||||
{status === 'error' && <ErrorMsg />}
|
||||
{status === 'success' && <ProjectEditView project={project} />}
|
||||
</div>
|
||||
<style>{styled}</style>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -43,4 +138,4 @@ export default ({ projectID }) => {
|
|||
export function getServerSideProps(context) {
|
||||
const { projectID } = context.query
|
||||
return { props: { projectID } }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,37 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { useEffect, useState, useRef } from 'react'
|
||||
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/arcade/projectBG.svg'
|
||||
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 */
|
||||
|
||||
const styled = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Slackey&family=Emblema+One&family=Gaegu&display=swap');
|
||||
body, html {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.slackey {
|
||||
font-family: "Slackey", sans-serif;
|
||||
}
|
||||
.emblema {
|
||||
font-family: "Emblema One", system-ui;
|
||||
}
|
||||
|
||||
.gaegu {
|
||||
font-family: "Gaegu", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #FAEFD6;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
`
|
||||
|
||||
const ProjectShowPage = ({projectID}) => {
|
||||
|
||||
|
|
@ -15,7 +42,23 @@ const ProjectShowPage = ({projectID}) => {
|
|||
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(
|
||||
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)
|
||||
}, [])
|
||||
useEffect(async () => {
|
||||
const token = window.localStorage.getItem('arcade.authToken')
|
||||
const response = await fetch(`/api/arcade/showcase/projects/${projectID}`, {
|
||||
|
|
@ -40,15 +83,46 @@ const ProjectShowPage = ({projectID}) => {
|
|||
}, [])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Nav color="dark" />
|
||||
<BGImg
|
||||
src={background}
|
||||
alt="Arcade Gallery BG Img"
|
||||
priority
|
||||
/>
|
||||
<Box
|
||||
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'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
ref={spotlightRef}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
zIndex: 2,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
bg: '#FAEFD6',
|
||||
pointerEvents: 'none'
|
||||
}}
|
||||
/>
|
||||
<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}>
|
||||
{
|
||||
{/* {
|
||||
status == 'loading' && <Loading />
|
||||
}
|
||||
|
||||
|
|
@ -69,11 +143,23 @@ const ProjectShowPage = ({projectID}) => {
|
|||
images={project.images}
|
||||
githubProf={project.githubProf}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
} */}
|
||||
|
||||
<Footer />
|
||||
<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>
|
||||
<style>{styled}</style>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -81,5 +167,5 @@ export default ProjectShowPage
|
|||
|
||||
export function getServerSideProps(context) {
|
||||
const { projectID } = context.query
|
||||
return { props: { projectID } }
|
||||
return { props: { "hi": 'HI' } }
|
||||
}
|
||||
65
yarn.lock
65
yarn.lock
|
|
@ -1229,6 +1229,13 @@
|
|||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.10.1", "@babel/runtime@^7.11.1", "@babel/runtime@^7.18.0":
|
||||
version "7.25.0"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb"
|
||||
integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
|
||||
dependencies:
|
||||
regenerator-runtime "^0.14.0"
|
||||
|
||||
"@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
|
||||
version "7.24.0"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
|
||||
|
|
@ -2055,6 +2062,15 @@
|
|||
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
|
||||
integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
|
||||
|
||||
"@rc-component/portal@^1.0.0-8":
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@rc-component/portal/-/portal-1.1.2.tgz#55db1e51d784e034442e9700536faaa6ab63fc71"
|
||||
integrity sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.18.0"
|
||||
classnames "^2.3.2"
|
||||
rc-util "^5.24.4"
|
||||
|
||||
"@remix-run/router@1.15.3":
|
||||
version "1.15.3"
|
||||
resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.15.3.tgz#d2509048d69dbb72d5389a14945339f1430b2d3c"
|
||||
|
|
@ -3378,6 +3394,11 @@ classnames@2.2.6:
|
|||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
|
||||
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
|
||||
|
||||
classnames@^2.2.1, classnames@^2.3.2:
|
||||
version "2.5.1"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
|
||||
integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
|
||||
|
||||
classnames@^2.2.6:
|
||||
version "2.3.2"
|
||||
resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz"
|
||||
|
|
@ -7417,6 +7438,34 @@ raw-body@2.4.1:
|
|||
iconv-lite "0.4.24"
|
||||
unpipe "1.0.0"
|
||||
|
||||
rc-dialog@^9.5.2:
|
||||
version "9.5.2"
|
||||
resolved "https://registry.yarnpkg.com/rc-dialog/-/rc-dialog-9.5.2.tgz#4cf7cca23aedb6fd3d9344ea8ffd14daa94ee3a0"
|
||||
integrity sha512-qVUjc8JukG+j/pNaHVSRa2GO2/KbV2thm7yO4hepQ902eGdYK913sGkwg/fh9yhKYV1ql3BKIN2xnud3rEXAPw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.10.1"
|
||||
"@rc-component/portal" "^1.0.0-8"
|
||||
classnames "^2.2.6"
|
||||
rc-motion "^2.3.0"
|
||||
rc-util "^5.21.0"
|
||||
|
||||
rc-motion@^2.3.0:
|
||||
version "2.9.2"
|
||||
resolved "https://registry.yarnpkg.com/rc-motion/-/rc-motion-2.9.2.tgz#f7c6d480250df8a512d0cfdce07ff3da906958cf"
|
||||
integrity sha512-fUAhHKLDdkAXIDLH0GYwof3raS58dtNUmzLF2MeiR8o6n4thNpSDQhOqQzWE4WfFZDCi9VEN8n7tiB7czREcyw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.11.1"
|
||||
classnames "^2.2.1"
|
||||
rc-util "^5.43.0"
|
||||
|
||||
rc-util@^5.21.0, rc-util@^5.24.4, rc-util@^5.43.0:
|
||||
version "5.43.0"
|
||||
resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.43.0.tgz#bba91fbef2c3e30ea2c236893746f3e9b05ecc4c"
|
||||
integrity sha512-AzC7KKOXFqAdIBqdGWepL9Xn7cm3vnAmjlHqUnoQaTMZYhM4VlXGLkkHHxj/BZ7Td0+SOPKB4RGPboBVKT9htw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.18.3"
|
||||
react-is "^18.2.0"
|
||||
|
||||
react-before-after-slider-component@^1.1.8:
|
||||
version "1.1.8"
|
||||
resolved "https://registry.yarnpkg.com/react-before-after-slider-component/-/react-before-after-slider-component-1.1.8.tgz#3df14381703aaa43428cdac05f271b8b492d25ca"
|
||||
|
|
@ -7472,6 +7521,11 @@ react-is@16.13.1, react-is@^16.10.2, react-is@^16.13.1, react-is@^16.7.0, react-
|
|||
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
|
||||
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
||||
|
||||
react-is@^18.2.0:
|
||||
version "18.3.1"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
|
||||
integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
|
||||
|
||||
react-konami-code@^2.3.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.npmjs.org/react-konami-code/-/react-konami-code-2.3.0.tgz"
|
||||
|
|
@ -8336,16 +8390,7 @@ string-hash@1.1.3:
|
|||
resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
|
||||
integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==
|
||||
|
||||
"string-width-cjs@npm:string-width@^4.2.0":
|
||||
version "4.2.3"
|
||||
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
|
||||
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
|
||||
dependencies:
|
||||
emoji-regex "^8.0.0"
|
||||
is-fullwidth-code-point "^3.0.0"
|
||||
strip-ansi "^6.0.1"
|
||||
|
||||
string-width@^4.1.0:
|
||||
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
|
||||
version "4.2.3"
|
||||
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
|
||||
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue