From fcbb8f8e2e86637996ba8e1bbfe712ec1ee5c24d Mon Sep 17 00:00:00 2001
From: Max Wofford <max@maxwofford.com>
Date: Wed, 3 Apr 2024 23:03:36 -0400
Subject: [PATCH] Yarn format

---
 components/bin/rsvp-form.js |  29 ++++---
 pages/api/bin/rsvp.js       |   5 +-
 pages/bin.js                | 152 ++++++++++++++++++++++++------------
 3 files changed, 120 insertions(+), 66 deletions(-)

diff --git a/components/bin/rsvp-form.js b/components/bin/rsvp-form.js
index a18e3efc..eaa106fa 100644
--- a/components/bin/rsvp-form.js
+++ b/components/bin/rsvp-form.js
@@ -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>
     </>
   )
-}
\ No newline at end of file
+}
diff --git a/pages/api/bin/rsvp.js b/pages/api/bin/rsvp.js
index abe2bfab..74e76afc 100644
--- a/pages/api/bin/rsvp.js
+++ b/pages/api/bin/rsvp.js
@@ -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)
   }
-}
\ No newline at end of file
+}
diff --git a/pages/bin.js b/pages/bin.js
index e1e08425..7e7101b1 100644
--- a/pages/bin.js
+++ b/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&nbsp;my!</Text>
+              Motors & lasers & mics,{' '}
+              <Text as="span" sx={{ fontWeight: 400, fontStyle: 'italic' }}>
+                oh&nbsp;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>
     </>
   )
-}
\ No newline at end of file
+}