System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 22:05:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make kit singular when donating 1 (#452)

Browse source
This commit is contained in:
Ella 2022-05-27 01:25:21 -07:00 • committed by GitHub
parent 1883b9be0f
commit b69f719c5b
1 changed files with 41 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
components/donate/gamelabForm.js
View file

@ -1,36 +1,46 @@
import { useState } from "react"
import { Box, Container, Label, Input, Button, Text, Flex } from "theme-ui"
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 */)
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: [1,2,3]}} style={{userSelect: 'none'}}>I'm donating{' '}
<Text sx={{
position: 'relative',
p: [1],
mx: 1,
borderRadius: "default",
color: 'white', bg: 'rgba(0,0,0,0.5)',
}}>
<ButtonIncrease count={count} setCount={setCount} />
<ButtonDecrease count={count} setCount={setCount} />
<Text>{count}</Text>
{' '}
<Text sx={{ fontSize: [1, 2, 3] }} style={{ userSelect: 'none' }}>
I'm donating{' '}
<Text
sx={{
position: 'relative',
p: [1],
mx: 1,
borderRadius: 'default',
color: 'white',
bg: 'rgba(0,0,0,0.5)'
}}
>
<ButtonIncrease count={count} setCount={setCount} />
<ButtonDecrease count={count} setCount={setCount} />
<Text>{count}</Text>{' '}
</Text>
Game Lab kit{count === 1 ? '' : 's'} to teens
</Text>
Game Lab kits to teens</Text>
<Button
variant="outlineLg"
as="a"
sx={{ color: 'white', bg: 'rgba(0,0,0,0.5)' }}
href={url()}>
href={url()}
>
Donate ${count * pricePerGamelab}
</Button>
</>
@ -38,35 +48,39 @@ const GamelabForm = () => {
}
export default GamelabForm
function ButtonDecrease({count, setCount}) {
function ButtonDecrease({ count, setCount }) {
function handleClick() {
setCount(Math.max(count-1, 1))
setCount(Math.max(count - 1, 1))
}
return (
<span
style={{
cursor: count <= 1 ? 'not-allowed' : 'pointer',
position: 'absolute',
top: '1em',
top: '1em'
// left: '0.5em',
}}
onClick={handleClick}
>▼</span>
>
▼
</span>
)
}
function ButtonIncrease({count, setCount}) {
function ButtonIncrease({ count, setCount }) {
function handleClick() {
setCount(count+1)
setCount(count + 1)
}
return (
<span
style={{
cursor: 'pointer',
position: 'absolute',
bottom: '1em',
bottom: '1em'
// left: '0.5em',
}}
onClick={handleClick}
>▲</span>
>
▲
</span>
)
}
}