2022-10-11 04:59:01 -07:00
|
|
|
import { useMemo } from 'react'
|
2023-01-24 16:54:24 -08:00
|
|
|
import FormatNumericValue from './FormatNumericValue'
|
2022-10-11 04:59:01 -07:00
|
|
|
|
|
|
|
interface DailyRangeProps {
|
|
|
|
high: number
|
|
|
|
low: number
|
|
|
|
price: number
|
|
|
|
}
|
|
|
|
|
|
|
|
const DailyRange = ({ high, low, price }: DailyRangeProps) => {
|
|
|
|
const rangePercent = useMemo(() => {
|
|
|
|
return ((price - low) * 100) / (high - low)
|
|
|
|
}, [high, low, price])
|
|
|
|
|
|
|
|
return (
|
2023-11-01 19:54:45 -07:00
|
|
|
<div className="flex w-full items-center justify-between sm:w-auto md:block">
|
|
|
|
<div className="flex w-full flex-col sm:w-auto sm:flex-row sm:items-center">
|
|
|
|
<span className={`mb-1 pr-2 font-mono text-th-fgd-2 sm:mb-0`}>
|
2023-01-24 16:54:24 -08:00
|
|
|
<FormatNumericValue value={low} isUsd />
|
2022-10-11 04:59:01 -07:00
|
|
|
</span>
|
2023-11-01 19:54:45 -07:00
|
|
|
<div className="mt-[1px] flex h-2 w-full rounded-sm bg-th-bkg-3 sm:w-32">
|
2022-10-11 04:59:01 -07:00
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
width: `${rangePercent}%`,
|
|
|
|
}}
|
2022-11-30 19:32:32 -08:00
|
|
|
className="flex rounded-sm bg-th-active"
|
2022-10-11 04:59:01 -07:00
|
|
|
></div>
|
|
|
|
</div>
|
2023-11-01 19:54:45 -07:00
|
|
|
<span
|
|
|
|
className={`mt-1 flex justify-end pl-2 font-mono text-th-fgd-2 sm:mt-0`}
|
|
|
|
>
|
2023-01-24 16:54:24 -08:00
|
|
|
<FormatNumericValue value={high} isUsd />
|
2022-10-11 04:59:01 -07:00
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default DailyRange
|