shop css

components/arcade/prizes.js

@@ -38,7 +38,7 @@ const Prizes = ({
             alignItems: 'center'
           }}
         >
-          <img src={img} sx={{ width: '100%', height: 'auto', maxWidth: '300px' }} />
+          <img src={img} sx={{ height: 'auto', maxWidth: '300px', maxHeight: '250px' }} />
         </Flex>
         <Text className="slackey" variant="headline" sx={{ color: '#FFEEC6' }}>
           {text}

components/arcade/shop-component.js

@@ -3,6 +3,8 @@ import { Image, Link, Text } from 'theme-ui'
 import { useRouter } from 'next/router'
 import { Box, Grid } from 'theme-ui'
 import Prizes from './prizes'
+import { Balancer } from 'react-wrap-balancer'
+
 /** @jsxImportSource theme-ui */
 
 const styled = `
@@ -22,7 +24,11 @@ body {
 
 `
 
-export default function ShopComponent({ availableItems, userAirtableID = null, hoursBalance = null }) {
+export default function ShopComponent({
+  availableItems,
+  userAirtableID = null,
+  hoursBalance = null
+}) {
   function buyLink(itemID, quantity = 1) {
     return `https://forms.hackclub.com/arcade-order?user_id=${userAirtableID}&item_id=${itemID}&quantity=${quantity}`
   }
@@ -31,23 +37,21 @@ export default function ShopComponent({ availableItems, userAirtableID = null, h
 
   return (
     <>
-      <h1
-        sx={{
-          textAlign: 'center',
-          fontSize: 5,
-          color: '#FF8C37',
-          mt: 0,
-          pt: 5
-        }}
-        className="slackey"
+    <Balancer>
+      <Text
+        sx={{ display: 'block', textAlign: 'center', color: '#35290F', textDecoration: 'underline', width: '90vw', margin: 'auto', color: '#09AFB4' }}
+        className="gaegu"
+        variant="subtitle"
       >
-        Shop
-      </h1>
-      <Text  sx={{ display: 'block', textAlign: 'center', color: '#35290F' }} className='gaegu' variant='subtitle'>for {userAirtableID}</Text>
-      {hoursBalance !== null && (
-        <span>You currently have {hoursBalance} 🎟️ tickets! Click on item to buy!</span>
-      )}
-       <Grid
+        Shop for {userAirtableID}. Click on item to buy!
+      </Text>
+      </Balancer>
+      {/* {hoursBalance !== null && (
+        <span>
+          You currently have {hoursBalance} 🎟️ tickets! Click on item to buy!
+        </span>
+      )} */}
+      <Grid
         sx={{
           pt: '50px',
           gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
@@ -57,30 +61,26 @@ export default function ShopComponent({ availableItems, userAirtableID = null, h
           margin: 'auto'
         }}
       >
-        {availableItems.sort((a,b) => a['Cost Hours'] - b['Cost Hours']).map((item, i) => (
-          <Prizes
-          img={part.fields['Image URL']}
-          text={item['Name']}
-          subtext={item['Description']}
-          cost={part.fields['Cost Hours']}
-          polaroidRotation={(2 + Math.random() * 4) * (i % 2 === 0 ? 1 : -1)}
-          ticketRotation={
-            (12 + Math.random() * 14) * (Math.random() > 0.5 ? 1 : -1)
-          }
-          link={buyLink(item.id)}
-          key={part.id}
-        />
-
-          // <li key={item.id}>
-          //   {includeBuyLink && (
-          //     <a href={buyLink(item.id)} target="_blank">Buy</a>
-          //   )}
-          //   <h2>{item['Name']}</h2>
-          //   <p>{item['Description']}</p>
-          //   <p>{item['Cost Hours']} 🎟️</p>
-          // </li>
-        ))}
+        {availableItems
+          .sort((a, b) => a['Cost Hours'] - b['Cost Hours'])
+          .map((item, i) => (
+            <Prizes
+              img={item['Image URL']}
+              text={item['Name']}
+              subtext={item['Description']}
+              cost={item['Cost Hours']}
+              polaroidRotation={
+                (2 + Math.random() * 4) * (i % 2 === 0 ? 1 : -1)
+              }
+              ticketRotation={
+                (12 + Math.random() * 14) * (Math.random() > 0.5 ? 1 : -1)
+              }
+              link={buyLink(item.id)}
+              key={item.id}
+            />
+          ))}
       </Grid>
+      <style>{styled}</style>
     </>
   )
-}
+}

pages/arcade/[userAirtableID]/shop.js

@@ -2,6 +2,7 @@ import ShopComponent from "../../../components/arcade/shop-component"
 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"
 /** @jsxImportSource theme-ui */
 
 const styled = `
@@ -25,18 +26,22 @@ export default function Shop({ availableItems, userAirtableID = null, hoursBalan
 
   return (
     <>
+    <Balancer>
       <h1
         sx={{
           textAlign: 'center',
           fontSize: 5,
           color: '#FF8C37',
-          mt: 0,
-          pt: 5
+          my: 0,
+          pt: 5,
+          display:'block',
+          width: '100vw'
         }}
         className="slackey"
       >
         Welcome to the shop
       </h1>
+      </Balancer>
       <Text sx={{ display: 'block', textAlign: 'center', color: '#35290F' }} className='gaegu' variant='subtitle' >Your current balance is {Math.floor(hoursBalance)} 🎟️</Text>
       <ShopComponent availableItems={availableItems} userAirtableID={userAirtableID} />
     </>
@@ -61,7 +66,8 @@ export async function getStaticProps({params}) {
         'Name': item['Name'] || null,
         'Description': item['Description'] || null,
         'Cost Hours': item['Cost Hours'] || 0,
-        id: item.id
+        id: item.id,
+        'Image URL': item['Image URL'] || null
       }))
       props.availableItems = availableItems
     }),