quantity

components/arcade/prizes.js

@@ -11,6 +11,7 @@ const Prizes = ({
   polaroidRotation,
   ticketRotation,
   link,
+  quantity,
   ...props
 }) => {
   return (
@@ -39,17 +40,22 @@ const Prizes = ({
         >
           <img src={img} sx={{ height: 'auto', maxWidth: '280px', maxHeight: '250px' }} alt={text} />
         </Flex>
-        <Text className="slackey" variant="headline" sx={{ color: '#FFEEC6' }}>
+        <Text className="slackey" variant="headline" sx={{ color: '#FFEEC6', mb: 0}}>
           {text}
         </Text>
         {/* <Text className="" variant="subtitle" sx={{ color: '#FFEEC6' }}>
           {text}
         </Text> */}
         <Balancer>
-          <Text variant="caption" sx={{ color: '#FFEEC6' }}>
+          <Text as='p' variant="caption" sx={{ color: '#FFEEC6', mb: 2,  overflowWrap: 'break-word'  }}>
             {subtext}
           </Text>
         </Balancer>
+        <Balancer>
+          <Text as='p' variant="caption" sx={{ color: '#FFEEC6', mt: 0, mb: 2 }}>
+            You can order {quantity} of these
+          </Text>
+        </Balancer>
         {link ? <Button sx={{borderRadius: '10px', color: '#FFEEC6', backgroundColor: '#09878b', width: 'fit-content'}} as='a' href={link} className='gaegu'>Buy</Button>:<></>}
         <Text
           sx={{

components/arcade/shop-component.js

@@ -52,11 +52,13 @@ export default function ShopComponent({
       <Grid
         sx={{
           pt: '50px',
+          pb: '150px',
           gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
           gap: '50px',
           maxWidth: '1000px',
           width: '80vw',
-          margin: 'auto'
+          margin: 'auto',
+          textDecoration: 'italic'
         }}
       >
         {availableItems
@@ -67,6 +69,7 @@ export default function ShopComponent({
               text={item['Name']}
               subtext={item['Description']}
               cost={item['Cost Hours']}
+              quantity={item['Max Order Quantity']}
               polaroidRotation={
                 (2 + Math.random() * 4) * (i % 2 === 0 ? 1 : -1)
               }

pages/arcade/[userAirtableID]/shop.js

@@ -3,6 +3,9 @@ import { getArcadeUser } from "../../api/arcade/[userAirtableID]"
 import { shopParts } from "../../api/arcade/shop"
 import { Image, Link, Text } from 'theme-ui'
 import { Balancer } from "react-wrap-balancer"
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+
 /** @jsxImportSource theme-ui */
 
 const styled = `
@@ -26,6 +29,12 @@ export default function Shop({ availableItems, userAirtableID = null, hoursBalan
 
   return (
     <>
+    <Meta
+        as={Head}
+        title="Arcade Shop"
+        description="Redeem prizes at your own Arcade Shop."
+        image="https://cloud-luaw423i2-hack-club-bot.vercel.app/0frame_33__1_.png"
+      />
     <Balancer>
       <h1
         sx={{
@@ -67,7 +76,8 @@ export async function getStaticProps({params}) {
         'Description': item['Description'] || null,
         'Cost Hours': item['Cost Hours'] || 0,
         id: item.id,
-        'Image URL': item['Image URL'] || null
+        'Image URL': item['Image URL'] || null,
+        'Max Order Quantity': item['Max Order Quantity'] || 1
       }))
       props.availableItems = availableItems
     }),