2022-04-15 18:11:51 +02:00
|
|
|
import React from 'react'
|
|
|
|
import NumberInput from '../shared/NumberInput'
|
|
|
|
import SettingBlock from './SettingBlock'
|
|
|
|
|
|
|
|
interface NumberInputSettingProps {
|
|
|
|
title: string
|
2022-07-18 15:20:52 +02:00
|
|
|
desc?: string
|
2022-04-15 18:11:51 +02:00
|
|
|
value: string
|
|
|
|
suffix?: string
|
|
|
|
onValue: (val: string) => void
|
|
|
|
}
|
|
|
|
|
|
|
|
function NumberInputSetting(props: NumberInputSettingProps) {
|
2022-07-18 15:20:52 +02:00
|
|
|
const { title, desc, value, suffix, onValue } = props
|
2022-04-15 18:11:51 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<SettingBlock
|
|
|
|
className="sub-setting-block"
|
|
|
|
title={title}
|
2022-07-18 15:20:52 +02:00
|
|
|
desc={desc}
|
2022-04-15 18:11:51 +02:00
|
|
|
input={
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
display: 'flex',
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center',
|
|
|
|
gap: '8px',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<NumberInput
|
|
|
|
style={{ width: '80px' }}
|
|
|
|
value={`${value}`}
|
|
|
|
onValue={onValue}
|
|
|
|
/>
|
|
|
|
{suffix && <span>{suffix}</span>}
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default NumberInputSetting
|