mirror of
https://github.com/System-End/site.git
synced 2026-04-19 16:28:21 +00:00
css
This commit is contained in:
belle
parent
0defc838fa
commit
03065f4df4
3 changed files with 202 additions and 78 deletions
74
components/arcade/prizes.js
Normal file
74
components/arcade/prizes.js
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import React, { useState, useRef, useEffect } from 'react'
|
||||
import { Box, Button, Text, Flex, Grid, Card, Link } from 'theme-ui'
|
||||
import Balancer from 'react-wrap-balancer'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
const Prizes = ({
|
||||
img,
|
||||
text,
|
||||
subtext,
|
||||
cost,
|
||||
polaroidRotation,
|
||||
ticketRotation,
|
||||
link,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<Link href={link ? link : ""} target="_blank" sx={{ textDecoration: 'none' }}>
|
||||
<Flex
|
||||
sx={{
|
||||
background: '#09AFB4',
|
||||
borderRadius: '10px',
|
||||
flexDirection: 'column',
|
||||
padding: '20px',
|
||||
position: 'relative',
|
||||
transform: `rotate(${polaroidRotation}deg)`,
|
||||
transitionDuration: '0.5s',
|
||||
'&:hover': {
|
||||
transform: 'scale(1.1)'
|
||||
}
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
background: '#FFEEC6',
|
||||
height: '250px',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<img src={img} sx={{ width: '100%', height: 'auto' }} />
|
||||
</Flex>
|
||||
<Text className="slackey" variant="headline" sx={{ color: '#FFEEC6' }}>
|
||||
{text}
|
||||
</Text>
|
||||
<Text className="" variant="subtitle" sx={{ color: '#FFEEC6' }}>
|
||||
{text}
|
||||
</Text>
|
||||
<Balancer>
|
||||
<Text variant="caption" sx={{ color: '#FFEEC6' }}>
|
||||
{subtext}
|
||||
</Text>
|
||||
</Balancer>
|
||||
<Text
|
||||
sx={{
|
||||
background: '#FF8C37',
|
||||
px: '20px',
|
||||
color: '#FFEEC6',
|
||||
position: 'absolute',
|
||||
top: '-10px',
|
||||
right: '-12px',
|
||||
transform: `rotate(${ticketRotation}deg)`
|
||||
}}
|
||||
variant="headline"
|
||||
className="gaegu"
|
||||
>
|
||||
{cost} {cost == 1 ? 'ticket' : 'tickets'}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
export default Prizes
|
||||
|
|
@ -1,69 +1,67 @@
|
|||
import { inventoryParts } from "../api/arcade/inventory"
|
||||
import { Box } from 'theme-ui'
|
||||
import { inventoryParts } from '../api/arcade/inventory'
|
||||
import { Box, Grid } from 'theme-ui'
|
||||
import Prizes from '../../components/arcade/prizes'
|
||||
const styled = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Slackey&family=Emblema+One&family=Gaegu&display=swap');
|
||||
|
||||
.slackey {
|
||||
font-family: "Slackey", sans-serif;
|
||||
}
|
||||
|
||||
.gaegu {
|
||||
font-family: "Gaegu", sans-serif;
|
||||
}
|
||||
|
||||
`
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
const ShopPage = ({parts}) => {
|
||||
const ShopPage = ({ parts }) => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
<h1 sx={
|
||||
{textAlign: 'center',
|
||||
fontSize: 5,
|
||||
color: 'primary'
|
||||
}
|
||||
}>Shop</h1>
|
||||
|
||||
<ul>
|
||||
|
||||
<Box sx={
|
||||
{display: 'flex',
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center',
|
||||
}
|
||||
}>
|
||||
|
||||
{parts.map(part => (
|
||||
|
||||
<Box sx={
|
||||
{maxWidth: '800px',
|
||||
mx: 'auto',
|
||||
minHeight: '300px',
|
||||
justifyContent: 'space-around',
|
||||
width: '230px',
|
||||
<div
|
||||
sx={{
|
||||
backgroundColor: '#FAEFD6'
|
||||
}}
|
||||
>
|
||||
<h1
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
fontSize: 5,
|
||||
color: '#FF8C37',
|
||||
mt: 0,
|
||||
pt: 5
|
||||
}}
|
||||
className="slackey"
|
||||
>
|
||||
Shop
|
||||
</h1>
|
||||
|
||||
<Grid
|
||||
sx={{
|
||||
pt: '50px',
|
||||
gridTemplateColumns: ['1fr', '1fr 1fr', '1fr 1fr', '1fr 1fr 1fr'],
|
||||
gap: '50px',
|
||||
maxWidth: '1000px',
|
||||
width: '90vw',
|
||||
margin: 'auto'
|
||||
}}
|
||||
>
|
||||
{parts.map((part, i) => (
|
||||
<Prizes
|
||||
img={part.fields['Image URL']}
|
||||
text={part.fields['Name']}
|
||||
subtext={part.fields['Name Small Text']}
|
||||
cost={part.fields['Hours']}
|
||||
polaroidRotation={
|
||||
(2 + Math.random() * 4) * (i % 2 === 0 ? 1 : -1)
|
||||
}
|
||||
}>
|
||||
<li key={part.id}>
|
||||
<h2>{part.fields['Name']}</h2>
|
||||
<p sx={
|
||||
{position: 'relative',
|
||||
top: '-1rem',
|
||||
fontSize: 2,
|
||||
color: 'secondary',
|
||||
mt: '0',
|
||||
mb: '-10px',}
|
||||
}>{part.fields['Name Small Text']}</p>
|
||||
<p sx={
|
||||
{mt: '0',
|
||||
fontSize: 1,
|
||||
color: 'primary',}
|
||||
}>Hours: {part.fields['Hours']}</p>
|
||||
<img src={part.fields['Image URL']} alt={part.fields['Name']} sx={
|
||||
{
|
||||
width: 100,
|
||||
height: 100,
|
||||
}
|
||||
}/>
|
||||
</li>
|
||||
</Box>
|
||||
|
||||
ticketRotation={
|
||||
(12 + Math.random() * 14) * (Math.random() > 0.5 ? 1 : -1)
|
||||
}
|
||||
key={part.id}
|
||||
/>
|
||||
))}
|
||||
|
||||
</Box>
|
||||
</ul>
|
||||
|
||||
</Grid>
|
||||
<style>{styled}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -79,4 +77,4 @@ export async function getStaticProps() {
|
|||
parts
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,69 @@
|
|||
import { Image, Link } from 'theme-ui'
|
||||
|
||||
import { Image, Link, Text } from 'theme-ui'
|
||||
import { inventoryParts } from '../../api/arcade/inventory'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
import { Box, Grid } from 'theme-ui'
|
||||
import Prizes from '../../../components/arcade/prizes'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
const styled = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Slackey&family=Emblema+One&family=Gaegu&display=swap');
|
||||
|
||||
.slackey {
|
||||
font-family: "Slackey", sans-serif;
|
||||
}
|
||||
|
||||
.gaegu {
|
||||
font-family: "Gaegu", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #FAEFD6;
|
||||
}
|
||||
|
||||
`
|
||||
|
||||
function orderLink(slackID, url) {
|
||||
return url + '&slackID=' + slackID
|
||||
}
|
||||
|
||||
|
||||
const ShopPage = ({parts, ...props}) => {
|
||||
const ShopPage = ({ parts, ...props }) => {
|
||||
const router = useRouter()
|
||||
const { slackID } = router.query
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 sx={
|
||||
{textAlign: 'center',
|
||||
<div sx={{
|
||||
pb: 6,
|
||||
|
||||
}}>
|
||||
<h1
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
fontSize: 5,
|
||||
color: 'primary'
|
||||
}
|
||||
}>Shop</h1>
|
||||
<span>This link is your own! Don't share it with others. Slack ID: {slackID}</span>
|
||||
<span>Click on the part name to order it.</span>
|
||||
<ul>
|
||||
{parts.map(part => (
|
||||
color: '#FF8C37',
|
||||
mt: 0,
|
||||
pt: 5
|
||||
}}
|
||||
className="slackey"
|
||||
>
|
||||
Shop
|
||||
</h1>
|
||||
<Text sx={{ display: 'block', textAlign: 'center', color: '#35290F' }} className='gaegu' variant='subtitle'>
|
||||
This link is your own! Don't share it with others. Slack ID: {slackID}
|
||||
</Text>
|
||||
<Text sx={{ display: 'block', textAlign: 'center', fontWeight: 'bold', color: '#35290F' }} className='gaegu' variant='subtitle'>
|
||||
Click on the part to order it.
|
||||
</Text>
|
||||
<Grid
|
||||
sx={{
|
||||
pt: '50px',
|
||||
gridTemplateColumns: ['1fr', '1fr 1fr', '1fr 1fr', '1fr 1fr 1fr'],
|
||||
gap: '50px',
|
||||
maxWidth: '1000px',
|
||||
width: '90vw',
|
||||
margin: 'auto'
|
||||
}}
|
||||
>
|
||||
{/* {parts.map(part => (
|
||||
<li key={part.id}>
|
||||
<h2>
|
||||
<Link href={orderLink(slackID, part.fields['Order Form URL'])} target="_blank">
|
||||
|
|
@ -37,8 +74,23 @@ const ShopPage = ({parts, ...props}) => {
|
|||
<p>{part.fields['Hours']}</p>
|
||||
<Image src={part.fields['Image URL']} alt={part.fields['Name']} />
|
||||
</li>
|
||||
))} */}
|
||||
{parts.map((part, i) => (
|
||||
<Prizes
|
||||
img={part.fields['Image URL']}
|
||||
text={part.fields['Name']}
|
||||
subtext={part.fields['Name Small Text']}
|
||||
cost={part.fields['Hours']}
|
||||
polaroidRotation={(2 + Math.random() * 4) * (i % 2 === 0 ? 1 : -1)}
|
||||
ticketRotation={
|
||||
(12 + Math.random() * 14) * (Math.random() > 0.5 ? 1 : -1)
|
||||
}
|
||||
link={orderLink(slackID, part.fields['Order Form URL'])}
|
||||
key={part.id}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</Grid>
|
||||
<style>{styled}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -57,8 +109,8 @@ export async function getStaticProps() {
|
|||
}
|
||||
|
||||
export async function getStaticPaths() {
|
||||
return ({
|
||||
return {
|
||||
paths: [],
|
||||
fallback: 'blocking'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue