mirror of
https://github.com/kremalicious/blog.git
synced 2024-06-24 10:16:27 +02:00
42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
import { type ReactElement } from 'react'
|
|
import Input from '@components/Input'
|
|
import Conversion from './Conversion'
|
|
import styles from './InputGroup.module.css'
|
|
|
|
export default function InputGroup({
|
|
amount,
|
|
isDisabled,
|
|
symbol,
|
|
setAmount
|
|
}: {
|
|
amount: string
|
|
isDisabled: boolean
|
|
symbol: string
|
|
setAmount(amount: string): void
|
|
}): ReactElement {
|
|
return (
|
|
<>
|
|
<div className={styles.inputGroup}>
|
|
<div className={styles.input}>
|
|
<Input
|
|
type="text"
|
|
inputMode="decimal"
|
|
pattern="[0-9.]*"
|
|
value={amount}
|
|
onChange={(e) => setAmount(e.target.value)}
|
|
className={styles.inputInput}
|
|
disabled={isDisabled}
|
|
/>
|
|
<div className={styles.currency}>
|
|
<span>{symbol}</span>
|
|
</div>
|
|
</div>
|
|
<button className="btn btn-primary" disabled={isDisabled}>
|
|
Make it rain
|
|
</button>
|
|
</div>
|
|
<Conversion amount={amount} symbol={symbol} />
|
|
</>
|
|
)
|
|
}
|