site/components/donate/gamelabForm.js

import { useState } from 'react'
import { Button, Text } from 'theme-ui'

const pricePerGamelab = 100

const GamelabForm = () => {
  const [count, setCount] = useState(1)
  function url() {
    const u = new URL(
      'https://bank.hackclub.com/donations/start/game-lab-fund/'
    )
    u.searchParams.set(
      'amount',
      pricePerGamelab * count * 100 /* convert to cents */
    )
    return u
  }
  return (
    <>
    <Text sx={{ fontSize: ['27px !important', 3], position: 'relative', justifySelf: 'center', alignSelf: 'center', paddingBottom: ['1em', '1em', 0]}} style={{ userSelect: 'none' }}>
        I'm donating{' '}
        <Text
          sx={{
            position: 'relative',
            px: [2],
            py: [1],
            mx: 1,
            borderRadius: 'default',
            color: 'white',
            bg: 'rgba(0,0,0,0.5)'
          }}
        >
          <ButtonIncrease count={count} setCount={setCount} />
          <ButtonDecrease count={count} setCount={setCount} sx={{position: 'relative'}} />
          <Text>{count}</Text>
        </Text>
        Sprig kit{count === 1 ? '' : 's'} to teens
      </Text>
      <Button
        variant="outlineLg"
        as="a"
        sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)', fontSize: [2, 3]}}
        href={url()}
      >
        Donate ${count * pricePerGamelab}
      </Button>
    </>
  )
}
export default GamelabForm

function ButtonDecrease({ count, setCount }) {
  function handleClick() {
    setCount(Math.max(count - 1, 1))
  }
  return (
    <span
      style={{
        cursor: count <= 1 ? 'not-allowed' : 'pointer',
        position: 'absolute',
        top: '1.2em',
        left: '50%',
        transform: 'translateX(-50%)',
      }}
      onClick={handleClick}
    >
      ▼
    </span>
  )
}
function ButtonIncrease({ count, setCount }) {
  function handleClick() {
    setCount(count + 1)
  }
  return (
    <span
      style={{
        cursor: 'pointer',
        position: 'absolute',
        bottom: '1.2em',
        left: '50%',
        transform: 'translateX(-50%)',
      }}
      onClick={handleClick}
    >
      ▲
    </span>
  )
}