b35c743286
* fix(useSWR): request hooks revalidation on focus disabled * [trade] add margin * [trade] include borrow rate in receipt * [trade] add tooltip margin and pr comments * updated regardign comments --------- Co-authored-by: Yusuf Seyrek <yusuf@delphilabs.io>
71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import { VerticalThreeLine } from 'components/Icons'
|
|
|
|
interface Props {
|
|
value: number
|
|
marginThreshold?: number
|
|
max: number
|
|
}
|
|
|
|
const THUMB_WIDTH = 33
|
|
|
|
function InputOverlay({ max, value, marginThreshold }: Props) {
|
|
const thumbPosPercent = max === 0 ? 0 : 100 / (max / value)
|
|
const thumbPadRight = (thumbPosPercent / 100) * THUMB_WIDTH
|
|
const markPosPercent = 100 / (max / (marginThreshold ?? 1))
|
|
const markPadRight = (markPosPercent / 100) * THUMB_WIDTH
|
|
const hasPastMarginThreshold = marginThreshold ? value >= marginThreshold : undefined
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={className.marksWrapper}
|
|
style={{
|
|
backgroundImage:
|
|
'linear-gradient(270deg, rgba(255, 97, 141, 0.89) 0%, rgba(66, 58, 70, 0.05) 100%)',
|
|
backgroundSize: `${thumbPosPercent}%`,
|
|
}}
|
|
>
|
|
{Array.from(Array(9).keys()).map((i) => (
|
|
<div key={`mark-${i}`} className={className.mark} />
|
|
))}
|
|
{marginThreshold && (
|
|
<div
|
|
key='margin-mark'
|
|
className={className.marginMarkContainer}
|
|
style={{ left: `calc(${markPosPercent}% - ${markPadRight}px)` }}
|
|
>
|
|
<div className={className.marginMark} />
|
|
<div className={className.marginMarkOverlay}>
|
|
<VerticalThreeLine className='h-2 w-[1px]' />
|
|
<div className={!hasPastMarginThreshold ? 'opacity-50' : 'opacity-100'}>Margin</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className={className.inputThumbOverlay}
|
|
style={{ left: `calc(${thumbPosPercent}% - ${thumbPadRight}px)` }}
|
|
>
|
|
{value}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const className = {
|
|
inputThumbOverlay: `
|
|
w-[33px] h-4 absolute text-[10px] top-[5px]
|
|
pointer-events-none text-center font-bold
|
|
bg-pink shadow-md border-b-0 border-1
|
|
border-solid rounded-sm backdrop-blur-sm border-white/10
|
|
`,
|
|
mark: `w-1 h-1 bg-black rounded-full bg-opacity-30`,
|
|
marginMark: `w-1 h-1 bg-white rounded-full`,
|
|
marginMarkContainer: 'absolute w-[33px] flex justify-center',
|
|
marginMarkOverlay: 'absolute top-2.5 flex-col text-xs w-[33px] items-center flex',
|
|
marksWrapper: `absolute flex-1 flex w-full justify-evenly bg-no-repeat
|
|
top-[8.5px] pointer-events-none pt-[2.5px] pb-[2.5px] rounded-lg`,
|
|
}
|
|
|
|
export default InputOverlay
|