position icon menu panel
This commit is contained in:
parent
31e5b13e2e
commit
636c79443a
|
@ -134,6 +134,8 @@ const TokenList = () => {
|
|||
<div className="flex justify-end space-x-2">
|
||||
<IconDropMenu
|
||||
icon={<DotsHorizontalIcon className="h-5 w-5" />}
|
||||
postion="leftBottom"
|
||||
disabled={!mangoAccount}
|
||||
>
|
||||
<LinkButton
|
||||
className="w-full text-left"
|
||||
|
|
|
@ -5,12 +5,35 @@ import { Fragment, ReactNode } from 'react'
|
|||
const IconDropMenu = ({
|
||||
icon,
|
||||
children,
|
||||
disabled,
|
||||
large,
|
||||
postion = 'bottomRight',
|
||||
}: {
|
||||
icon: ReactNode
|
||||
children: ReactNode
|
||||
disabled?: boolean
|
||||
large?: boolean
|
||||
postion?:
|
||||
| 'bottomLeft'
|
||||
| 'bottomRight'
|
||||
| 'topLeft'
|
||||
| 'topRight'
|
||||
| 'leftBottom'
|
||||
| 'leftTop'
|
||||
| 'rightBottom'
|
||||
| 'rightTop'
|
||||
}) => {
|
||||
const panelPosition = {
|
||||
bottomLeft: large ? 'left-0 top-14' : 'left-0 top-12',
|
||||
bottomRight: large ? 'right-0 top-14' : 'right-0 top-12',
|
||||
topLeft: large ? 'left-0 bottom-14' : 'left-0 bottom-12',
|
||||
topRight: large ? 'right-0 bottom-14' : 'right-0 bottom-12',
|
||||
leftBottom: large ? 'right-14 bottom-0' : 'right-12 bottom-0',
|
||||
leftTop: large ? 'right-14 top-0' : 'right-12 top-0',
|
||||
rightBottom: large ? 'left-14 bottom-0' : 'left-12 bottom-0',
|
||||
rightTop: large ? 'left-14 top-0' : 'left-12 top-0',
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
{({ open }) => (
|
||||
|
@ -18,7 +41,10 @@ const IconDropMenu = ({
|
|||
<Popover.Button
|
||||
className={`flex ${
|
||||
large ? 'h-12 w-12' : 'h-10 w-10'
|
||||
} items-center justify-center rounded-full border border-th-bkg-button hover:text-th-primary`}
|
||||
} items-center justify-center rounded-full border border-th-bkg-button hover:text-th-primary ${
|
||||
disabled ? 'cursor-not-allowed opacity-60' : ''
|
||||
}`}
|
||||
disabled={disabled}
|
||||
>
|
||||
{open ? <XIcon className="h-5 w-5" /> : icon}
|
||||
</Popover.Button>
|
||||
|
@ -34,9 +60,7 @@ const IconDropMenu = ({
|
|||
leaveTo="opacity-0"
|
||||
>
|
||||
<Popover.Panel
|
||||
className={`absolute right-0 ${
|
||||
large ? 'top-14' : 'top-12'
|
||||
} z-20 w-48 space-y-2 rounded-md border border-th-bkg-3 bg-th-bkg-1 p-4`}
|
||||
className={`absolute ${panelPosition[postion]} z-20 w-48 space-y-2 rounded-md border border-th-bkg-3 bg-th-bkg-1 p-4`}
|
||||
>
|
||||
{children}
|
||||
</Popover.Panel>
|
||||
|
|
|
@ -180,7 +180,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
|||
) : null}
|
||||
{mouseData ? (
|
||||
<>
|
||||
<div className="mb-0.5 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
|
||||
<div className="mb-1 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
|
||||
<FlipNumbers
|
||||
height={40}
|
||||
width={26}
|
||||
|
@ -206,13 +206,13 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
|||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-th-fgd-4">
|
||||
<p className="text-sm text-th-fgd-4">
|
||||
{dayjs(mouseData['time']).format('DD MMM YY, h:mma')}
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="mb-0.5 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
|
||||
<div className="mb-1 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
|
||||
<FlipNumbers
|
||||
height={40}
|
||||
width={26}
|
||||
|
@ -238,7 +238,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
|||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-th-fgd-4">
|
||||
<p className="text-sm text-th-fgd-4">
|
||||
{dayjs(chartData[chartData.length - 1]['time']).format(
|
||||
'DD MMM YY, h:mma'
|
||||
)}
|
||||
|
|
Loading…
Reference in New Issue