80 lines
2.8 KiB
TypeScript
80 lines
2.8 KiB
TypeScript
import classNames from 'classnames'
|
|
|
|
import { VerticalThreeLine } from 'components/common/Icons'
|
|
import { LeverageSliderType } from 'components/common/LeverageSlider'
|
|
import { formatValue } from 'utils/formatters'
|
|
|
|
interface Props {
|
|
value: number
|
|
marginThreshold?: number
|
|
max: number
|
|
type: LeverageSliderType
|
|
min: number
|
|
}
|
|
|
|
const THUMB_WIDTH = 33
|
|
|
|
function InputOverlay({ max, value, marginThreshold, type, min }: Props) {
|
|
const thumbPosPercent = max === 0 ? 0 : 100 / ((max - min) / (value - min))
|
|
const thumbPadRight = (thumbPosPercent / 100) * THUMB_WIDTH
|
|
const markPosPercent = 100 / (max / (marginThreshold ?? 1))
|
|
const markPadRight = (markPosPercent / 100) * THUMB_WIDTH
|
|
const hasPastMarginThreshold = marginThreshold ? value >= marginThreshold : undefined
|
|
|
|
console.log(max, value)
|
|
return (
|
|
<>
|
|
<div
|
|
className={classNames(
|
|
'absolute flex-1 flex w-full justify-evenly top-[8.5px] pointer-events-none pt-[2.5px] pb-[2.5px] rounded-lg',
|
|
'before:absolute',
|
|
'before:top-0 before:bottom-0 before:right-0 before:left-0',
|
|
'slider-mask',
|
|
type === 'long' && 'before:gradient-slider-green',
|
|
type === 'short' && 'before:gradient-slider-red',
|
|
type === 'margin' && 'before:gradient-slider-pink',
|
|
)}
|
|
style={{ width: `${thumbPosPercent}%` }}
|
|
>
|
|
{Array.from(Array(9).keys()).map((i) => (
|
|
<div key={`mark-${i}`} className='w-1 h-1 bg-black rounded-full bg-opacity-30' />
|
|
))}
|
|
{marginThreshold !== undefined && (
|
|
<div
|
|
key='margin-mark'
|
|
className='absolute w-[33px] flex justify-center'
|
|
style={{ left: `calc(${markPosPercent}% - ${markPadRight}px)` }}
|
|
>
|
|
<div className='w-1 h-1 bg-white rounded-full' />
|
|
<div className='absolute top-2.5 flex-col text-xs w-[33px] items-center flex'>
|
|
<VerticalThreeLine className='h-2 w-[1px]' />
|
|
<div className={!hasPastMarginThreshold ? 'opacity-50' : 'opacity-100'}>Margin</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className={classNames(
|
|
'w-[36px] h-4.5 absolute text-[10px] top-[3.5px]',
|
|
'pointer-events-none text-center font-bold',
|
|
'border rounded-sm border-white/20',
|
|
type === 'long' && 'bg-green',
|
|
type === 'short' && 'bg-error',
|
|
type === 'margin' && 'bg-pink',
|
|
)}
|
|
style={{ left: `calc(${thumbPosPercent}% - ${thumbPadRight}px)` }}
|
|
>
|
|
{formatValue(value, {
|
|
minDecimals: type !== 'margin' ? 1 : 2,
|
|
maxDecimals: type !== 'margin' ? 1 : 2,
|
|
abbreviated: true,
|
|
rounded: true,
|
|
suffix: type !== 'margin' ? 'x' : '',
|
|
})}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default InputOverlay
|