63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import React, { useState } from 'react'
|
|
import styled from 'styled-components'
|
|
import { Flex, Text, Button } from '@pancakeswap/uikit'
|
|
|
|
const SubButton = styled(Button)`
|
|
width: 25px;
|
|
height: 25px;
|
|
background: rgba(239, 232, 247, 0.39);
|
|
border: 1px solid rgba(255, 255, 255, 0.0588235294117647);
|
|
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
|
|
font-size: 18px;
|
|
color: #ada5ba;
|
|
border-radius: 5px;
|
|
padding: 0;
|
|
`
|
|
|
|
const AddButton = styled(Button)`
|
|
width: 25px;
|
|
height: 25px;
|
|
background: linear-gradient(180deg, #6eddfa 0%, #ac74f1 100%);
|
|
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
|
|
font-size: 18px;
|
|
color: #fff;
|
|
border-radius: 5px;
|
|
padding: 0;
|
|
`
|
|
|
|
interface StepProp {
|
|
number?: number
|
|
max?: number
|
|
value?: (v) => void
|
|
}
|
|
|
|
const StepCom: React.FC<StepProp> = ({ number, max = 5, value }) => {
|
|
const [valNumber, setInputState] = useState(number)
|
|
|
|
const onChange = (type) => {
|
|
let num = valNumber
|
|
if (type === 'add') {
|
|
if (valNumber === max) return
|
|
num += 1
|
|
value(num)
|
|
setInputState(num)
|
|
} else {
|
|
if (valNumber === 0) return
|
|
num -= 1
|
|
value(num)
|
|
setInputState(num)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Flex justifyContent="space-between" alignItems="center" width={120}>
|
|
<SubButton onClick={() => onChange('sub')}>-</SubButton>
|
|
<Text width={60} textAlign="center" color="#2F3748" fontSize="16px">
|
|
{valNumber}
|
|
</Text>
|
|
<AddButton onClick={() => onChange('add')}>+</AddButton>
|
|
</Flex>
|
|
)
|
|
}
|
|
export default StepCom
|