mirror of
https://github.com/System-End/site.git
synced 2026-04-19 18:35:12 +00:00
Yarn format
This commit is contained in:
Max Wofford
parent
d46cef8c41
commit
fcbb8f8e2e
3 changed files with 120 additions and 66 deletions
|
|
@ -4,15 +4,11 @@ import Submit from '../submit'
|
|||
import { Slide } from 'react-reveal'
|
||||
|
||||
export default function RsvpForm() {
|
||||
const { status, formProps, useField } = useForm(
|
||||
'/api/bin/rsvp',
|
||||
null,
|
||||
{
|
||||
clearOnSubmit: 60000,
|
||||
method: 'POST',
|
||||
initData: {}
|
||||
}
|
||||
)
|
||||
const { status, formProps, useField } = useForm('/api/bin/rsvp', null, {
|
||||
clearOnSubmit: 60000,
|
||||
method: 'POST',
|
||||
initData: {}
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -27,14 +23,17 @@ export default function RsvpForm() {
|
|||
/>
|
||||
</Label>
|
||||
<Label variant="labelHoriz" sx={{ fontSize: 1, pt: 1 }}>
|
||||
<Checkbox {...useField('high_schooler', 'checkbox')} defaultChecked={false} />I am a current high
|
||||
school student or younger.
|
||||
<Checkbox
|
||||
{...useField('high_schooler', 'checkbox')}
|
||||
defaultChecked={false}
|
||||
/>
|
||||
I am a current high school student or younger.
|
||||
</Label>
|
||||
<Label variant="labelHoriz" sx={{ fontSize: 1, pt: 1 }}>
|
||||
<Checkbox {...useField('stickers', 'checkbox')} />
|
||||
I want a sticker sheet.
|
||||
<Checkbox {...useField('stickers', 'checkbox')} />I want a sticker
|
||||
sheet.
|
||||
</Label>
|
||||
{(useField('stickers', 'checkbox').checked) && (
|
||||
{useField('stickers', 'checkbox').checked && (
|
||||
<Slide left delay={20}>
|
||||
<Label>
|
||||
Address (line 1)
|
||||
|
|
@ -60,4 +59,4 @@ export default function RsvpForm() {
|
|||
</form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ const rsvpsTable = new AirtablePlus({
|
|||
|
||||
export default async function handler(req, res) {
|
||||
if (req.method === 'POST') {
|
||||
const { email, high_schooler, stickers, address_line_1, address_zip } = req.body
|
||||
const { email, high_schooler, stickers, address_line_1, address_zip } =
|
||||
req.body
|
||||
|
||||
const fields = {
|
||||
Email: email,
|
||||
|
|
@ -27,4 +28,4 @@ export default async function handler(req, res) {
|
|||
|
||||
res.status(200).json(result.length)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
152
pages/bin.js
152
pages/bin.js
|
|
@ -1,12 +1,22 @@
|
|||
import { Box, Container, Text, Heading, Card, Flex, Image, Link, Grid } from "theme-ui";
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Text,
|
||||
Heading,
|
||||
Card,
|
||||
Flex,
|
||||
Image,
|
||||
Link,
|
||||
Grid
|
||||
} from 'theme-ui'
|
||||
import Head from 'next/head'
|
||||
import Meta from '@hackclub/meta'
|
||||
import Nav from '../components/nav'
|
||||
import { useEffect, useState } from "react";
|
||||
import Footer from "../components/footer";
|
||||
import { keyframes } from "@emotion/react";
|
||||
import RsvpForm from "../components/bin/rsvp-form";
|
||||
import { Slide } from "react-reveal";
|
||||
import { useEffect, useState } from 'react'
|
||||
import Footer from '../components/footer'
|
||||
import { keyframes } from '@emotion/react'
|
||||
import RsvpForm from '../components/bin/rsvp-form'
|
||||
import { Slide } from 'react-reveal'
|
||||
|
||||
const RsvpCount = () => {
|
||||
const [rsvpCount, setRsvpCount] = useState(0)
|
||||
|
|
@ -17,9 +27,7 @@ const RsvpCount = () => {
|
|||
setRsvpCount(results)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Text>{100 - rsvpCount} RSVPs until the start of...</Text>
|
||||
)
|
||||
return <Text>{100 - rsvpCount} RSVPs until the start of...</Text>
|
||||
}
|
||||
|
||||
const stickerImages = [
|
||||
|
|
@ -37,16 +45,20 @@ const OnboardCount = () => {
|
|||
setOnboardCount(results.count)
|
||||
}, [])
|
||||
|
||||
return (<Text>{onboardCount}</Text>)
|
||||
return <Text>{onboardCount}</Text>
|
||||
}
|
||||
|
||||
const Electronic = ({imageUrl, name, description}) => {
|
||||
const Electronic = ({ imageUrl, name, description }) => {
|
||||
return (
|
||||
<Card sx={{display: 'inline-flex', textAlign: 'center', my: 'auto'}}>
|
||||
<Flex sx={{mx: 'auto', flexDirection: "column", display: 'inline-flex'}}>
|
||||
<Image src={imageUrl} width="100"/>
|
||||
<Heading as="span" variant="headline">{name}</Heading>
|
||||
<Text sx={{whiteSpace: 'nowrap'}}>{description}</Text>
|
||||
<Card sx={{ display: 'inline-flex', textAlign: 'center', my: 'auto' }}>
|
||||
<Flex
|
||||
sx={{ mx: 'auto', flexDirection: 'column', display: 'inline-flex' }}
|
||||
>
|
||||
<Image src={imageUrl} width="100" />
|
||||
<Heading as="span" variant="headline">
|
||||
{name}
|
||||
</Heading>
|
||||
<Text sx={{ whiteSpace: 'nowrap' }}>{description}</Text>
|
||||
</Flex>
|
||||
</Card>
|
||||
)
|
||||
|
|
@ -60,11 +72,7 @@ const wobble = keyframes({
|
|||
export default function Bin() {
|
||||
return (
|
||||
<>
|
||||
<Meta
|
||||
as={Head}
|
||||
title="The Bin"
|
||||
description="Jump in the trash!"
|
||||
/>
|
||||
<Meta as={Head} title="The Bin" description="Jump in the trash!" />
|
||||
<Nav />
|
||||
<Box as="main" sx={{ pt: '3em', bg: '#ECE9E0', textAlign: 'center' }}>
|
||||
<Container sx={{ position: 'relative' }}>
|
||||
|
|
@ -74,37 +82,51 @@ export default function Bin() {
|
|||
variant="ultratitle"
|
||||
py={3}
|
||||
sx={{
|
||||
fontSize: "6em",
|
||||
fontSize: '6em',
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer',
|
||||
'@media (prefers-reduced-motion: no-preference)': {
|
||||
animation: `${wobble} 2.5s ease-in-out infinite alternate`
|
||||
},
|
||||
}
|
||||
}}
|
||||
>
|
||||
🗑️
|
||||
</Heading>
|
||||
<br />
|
||||
<RsvpCount />
|
||||
<Heading
|
||||
as="h1"
|
||||
variant="ultratitle"
|
||||
py={3}
|
||||
>
|
||||
<Heading as="h1" variant="ultratitle" py={3}>
|
||||
The Bin
|
||||
</Heading>
|
||||
<Text sx={{ fontWeight: 'bold' }}>An electronics starter kit, customized for <em>your</em> project</Text>
|
||||
<Text sx={{ fontWeight: 'bold' }}>
|
||||
An electronics starter kit, customized for <em>your</em> project
|
||||
</Text>
|
||||
</Box>
|
||||
<Box as="section" sx={{ textAlign: 'center' }}>
|
||||
<Card sx={{ p: 3, mt: 4, mx: 'auto', maxWidth: '40ch' }}>
|
||||
<Text as="p" sx={{ my: 1 }}>High schoolers can get a kit of electronics parts for free to build their first project.</Text>
|
||||
<Text as="p" sx={{ color: 'muted', mb: 3 }}>RSVP to get notified when applications open.</Text>
|
||||
<Text as="p" sx={{ my: 1 }}>
|
||||
High schoolers can get a kit of electronics parts for free to
|
||||
build their first project.
|
||||
</Text>
|
||||
<Text as="p" sx={{ color: 'muted', mb: 3 }}>
|
||||
RSVP to get notified when applications open.
|
||||
</Text>
|
||||
<RsvpForm />
|
||||
</Card>
|
||||
</Box>
|
||||
<Box as="section" sx={{ textAlign: 'left', pt: '4em', maxWidth: 'narrow', mx: 'auto' }}>
|
||||
<Box
|
||||
as="section"
|
||||
sx={{
|
||||
textAlign: 'left',
|
||||
pt: '4em',
|
||||
maxWidth: 'narrow',
|
||||
mx: 'auto'
|
||||
}}
|
||||
>
|
||||
<Heading as="h2" variant="title">
|
||||
Motors & lasers & mics, <Text as="span" sx={{fontWeight: 400, fontStyle: 'italic'}}>oh my!</Text>
|
||||
Motors & lasers & mics,{' '}
|
||||
<Text as="span" sx={{ fontWeight: 400, fontStyle: 'italic' }}>
|
||||
oh my!
|
||||
</Text>
|
||||
</Heading>
|
||||
<Box sx={{ textAlign: 'left' }}>
|
||||
<Flex sx={{ my: 4 }}>
|
||||
|
|
@ -112,11 +134,19 @@ export default function Bin() {
|
|||
<Image src="https://cloud-mt5wqf6f5-hack-club-bot.vercel.app/0rummaging.png" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading as="p" variant="headline"><b>Rummage</b></Heading>
|
||||
<Text>Dig through the bin to get a randomly generated set of parts (<em>or you can choose your own</em>). For example...</Text>
|
||||
<Heading as="p" variant="headline">
|
||||
<b>Rummage</b>
|
||||
</Heading>
|
||||
<Text>
|
||||
Dig through the bin to get a randomly generated set of parts
|
||||
(<em>or you can choose your own</em>). For example...
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Image src="https://cloud-2wkwrydc4-hack-club-bot.vercel.app/0parts.svg" width="100%" />
|
||||
<Image
|
||||
src="https://cloud-2wkwrydc4-hack-club-bot.vercel.app/0parts.svg"
|
||||
width="100%"
|
||||
/>
|
||||
{/*<Grid columns={[1, 2, 3]} gap={3}>
|
||||
<Slide up>
|
||||
<Electronic name="Relay" description="On/Off Switch" imageUrl="https://cloud-4zl0ojqxq-hack-club-bot.vercel.app/0placeholder3.png"/>
|
||||
|
|
@ -134,14 +164,25 @@ export default function Bin() {
|
|||
<Image src="https://cloud-i547pyt1f-hack-club-bot.vercel.app/0idea.png" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text as="p" variant="headline"><b>Ideas</b></Text>
|
||||
<Text>With your parts picked out, <b>what will you make?</b> A voice activated laser? A portable disco party? A flashlight that only turns on in the daytime?</Text>
|
||||
<Text as="p" variant="headline">
|
||||
<b>Ideas</b>
|
||||
</Text>
|
||||
<Text>
|
||||
With your parts picked out, <b>what will you make?</b> A
|
||||
voice activated laser? A portable disco party? A flashlight
|
||||
that only turns on in the daytime?
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Flex sx={{ my: 4 }}>
|
||||
<Box>
|
||||
<Text as="p"><b>3. Prototype</b></Text>
|
||||
<Text>Turn your idea into something almost real: simulate your project in an online editor for beginners.</Text>
|
||||
<Text as="p">
|
||||
<b>3. Prototype</b>
|
||||
</Text>
|
||||
<Text>
|
||||
Turn your idea into something almost real: simulate your
|
||||
project in an online editor for beginners.
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Image src="https://cloud-i547pyt1f-hack-club-bot.vercel.app/0idea.png" />
|
||||
|
|
@ -152,11 +193,19 @@ export default function Bin() {
|
|||
<Image src="https://cloud-i547pyt1f-hack-club-bot.vercel.app/0idea.png" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text as="p"><b>4. Show off & ship it!</b></Text>
|
||||
<Text>Show off your circuit! If it works in simulation, <b>we’ll send you the parts to build it in real life.</b></Text>
|
||||
<Text as="p">
|
||||
<b>4. Show off & ship it!</b>
|
||||
</Text>
|
||||
<Text>
|
||||
Show off your circuit! If it works in simulation,{' '}
|
||||
<b>we’ll send you the parts to build it in real life.</b>
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Image src="https://cloud-ge8yutn2q-hack-club-bot.vercel.app/0image.png" width="100%" />
|
||||
<Image
|
||||
src="https://cloud-ge8yutn2q-hack-club-bot.vercel.app/0image.png"
|
||||
width="100%"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
|
|
@ -166,11 +215,16 @@ export default function Bin() {
|
|||
<Heading as="h3" variant="subheadline" mb={2}>
|
||||
A project by <a href="https://hackclub.com/">Hack Club</a>.
|
||||
</Heading>
|
||||
<Text as="p" variant="caption" mb={3} sx={{ width: ['85%', '75%', '60%'] }}>
|
||||
Hack Club is a registered 501(c)3 nonprofit organization that supports a
|
||||
network of 20k+ technical high schoolers. We believe you learn best by
|
||||
building so we're removing barriers to hardware access so any teenager can
|
||||
explore. In the past few years, we've{' '}
|
||||
<Text
|
||||
as="p"
|
||||
variant="caption"
|
||||
mb={3}
|
||||
sx={{ width: ['85%', '75%', '60%'] }}
|
||||
>
|
||||
Hack Club is a registered 501(c)3 nonprofit organization that
|
||||
supports a network of 20k+ technical high schoolers. We believe you
|
||||
learn best by building so we're removing barriers to hardware access
|
||||
so any teenager can explore. In the past few years, we've{' '}
|
||||
<Link href="https://winter.hackclub.com" target="_blank">
|
||||
partnered with GitHub to give away $50k of hardware
|
||||
</Link>
|
||||
|
|
@ -191,4 +245,4 @@ export default function Bin() {
|
|||
</Footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue