mirror of
https://github.com/kremalicious/blog.git
synced 2024-06-28 08:37:57 +02:00
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { type ReactElement } from 'react'
|
|
import Input from '@components/Input'
|
|
import { Conversion } from '../Conversion'
|
|
import styles from './InputGroup.module.css'
|
|
import { TokenSelect } from '../TokenSelect'
|
|
import { $isInitSend } from '@features/Web3/stores'
|
|
|
|
export function InputGroup({
|
|
amount,
|
|
isDisabled,
|
|
setAmount
|
|
}: {
|
|
amount: string
|
|
isDisabled: boolean
|
|
setAmount: React.Dispatch<React.SetStateAction<string>>
|
|
}): ReactElement {
|
|
return (
|
|
<>
|
|
<div className={styles.inputGroup}>
|
|
<div className={styles.inputWrap}>
|
|
<div className={styles.token}>
|
|
<TokenSelect />
|
|
</div>
|
|
<Input
|
|
type="text"
|
|
inputMode="decimal"
|
|
pattern="[0-9.]*"
|
|
value={amount}
|
|
placeholder="0.00"
|
|
onChange={(e) => setAmount(e.target.value)}
|
|
className={styles.inputInput}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
className={`${styles.submit} btn btn-primary`}
|
|
disabled={isDisabled || !amount}
|
|
onClick={() => $isInitSend.set(true)}
|
|
>
|
|
Preview
|
|
</button>
|
|
</div>
|
|
<Conversion amount={amount} />
|
|
</>
|
|
)
|
|
}
|