mango-ui-v3/components/mobile/BottomBar.tsx

205 lines
5.9 KiB
TypeScript

import { ReactNode, useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import {
ChartBarIcon,
CurrencyDollarIcon,
MenuIcon,
XIcon,
} from '@heroicons/react/solid'
import { BtcMonoIcon, TradeIcon, TrophyIcon } from '../icons'
import { useTranslation } from 'next-i18next'
import { IconButton } from '../Button'
import {
CalculatorIcon,
CashIcon,
ChevronRightIcon,
CurrencyDollarIcon as FeesIcon,
LightBulbIcon,
SwitchHorizontalIcon,
UserAddIcon,
} from '@heroicons/react/solid'
const StyledBarItemLabel = ({ children, ...props }) => (
<div style={{ fontSize: '0.6rem', lineHeight: 1 }} {...props}>
{children}
</div>
)
const BottomBar = () => {
const { t } = useTranslation('common')
const { asPath } = useRouter()
const [showPanel, setShowPanel] = useState(false)
return (
<>
<div className="default-transition grid grid-cols-5 grid-rows-1 bg-th-bkg-4 py-2.5">
<Link
href={{
pathname: '/markets',
}}
>
<a
className={`${
asPath === '/markets' ? 'text-th-primary' : 'text-th-fgd-3'
} default-transition col-span-1 flex cursor-pointer flex-col items-center`}
>
<BtcMonoIcon className="mb-1 h-4 w-4" />
<StyledBarItemLabel>{t('markets')}</StyledBarItemLabel>
</a>
</Link>
<Link
href={{
pathname: '/',
query: { name: 'BTC-PERP' },
}}
shallow={true}
>
<a
className={`${
asPath === '/' || asPath.startsWith('/?name')
? 'text-th-primary'
: 'text-th-fgd-3'
} default-transition col-span-1 flex cursor-pointer flex-col items-center`}
>
<TradeIcon className="mb-1 h-4 w-4" />
<StyledBarItemLabel>{t('trade')}</StyledBarItemLabel>
</a>
</Link>
<Link href="/account" shallow={true}>
<a
className={`${
asPath === '/account' ? 'text-th-primary' : 'text-th-fgd-3'
} default-transition col-span-1 flex cursor-pointer flex-col items-center`}
>
<CurrencyDollarIcon className="mb-1 h-4 w-4" />
<StyledBarItemLabel>{t('account')}</StyledBarItemLabel>
</a>
</Link>
<Link href="/stats" shallow={true}>
<a
className={`${
asPath === '/stats' ? 'text-th-primary' : 'text-th-fgd-3'
} default-transition col-span-1 flex cursor-pointer flex-col items-center`}
>
<ChartBarIcon className="mb-1 h-4 w-4" />
<StyledBarItemLabel>{t('stats')}</StyledBarItemLabel>
</a>
</Link>
<a
className={`${
showPanel ? 'text-th-primary' : 'text-th-fgd-3'
} default-transition col-span-1 flex cursor-pointer flex-col items-center`}
onClick={() => setShowPanel(!showPanel)}
>
<MenuIcon className="mb-1 h-4 w-4" />
<StyledBarItemLabel>{t('more')}</StyledBarItemLabel>
</a>
</div>
<MoreMenuPanel showPanel={showPanel} setShowPanel={setShowPanel} />
</>
)
}
export default BottomBar
const MoreMenuPanel = ({
showPanel,
setShowPanel,
}: {
showPanel: boolean
setShowPanel: (showPanel: boolean) => void
}) => {
const { t } = useTranslation('common')
return (
<div
className={`fixed bottom-0 z-30 h-96 w-full transform overflow-hidden bg-th-bkg-4 px-4 transition-all duration-700 ease-in-out ${
showPanel ? 'translate-y-0' : 'translate-y-full'
}`}
>
<div className="flex justify-end py-4">
<IconButton className="" onClick={() => setShowPanel(false)}>
<XIcon className="h-5 w-5" />
</IconButton>
</div>
<div
className="border-b border-th-fgd-4"
onClick={() => setShowPanel(false)}
>
<MoreMenuItem
title={t('borrow')}
path="/borrow"
icon={<CashIcon className="h-5 w-5" />}
/>
<MoreMenuItem
title={t('calculator')}
path="/risk-calculator"
icon={<CalculatorIcon className="h-5 w-5" />}
/>
<MoreMenuItem
title={t('swap')}
path="/swap"
icon={<SwitchHorizontalIcon className="h-5 w-5" />}
/>
<MoreMenuItem
title={t('leaderboard')}
path="/leaderboard"
icon={<TrophyIcon className="h-5 w-5" />}
/>
<MoreMenuItem
title={t('referrals')}
path="/referral"
icon={<UserAddIcon className="h-5 w-5" />}
/>
<MoreMenuItem
title={t('fees')}
path="/fees"
icon={<FeesIcon className="h-5 w-5" />}
/>
<MoreMenuItem
title={t('learn')}
path="https://docs.mango.markets/"
icon={<LightBulbIcon className="h-5 w-5" />}
isExternal
/>
</div>
</div>
)
}
const MoreMenuItem = ({
title,
path,
icon,
isExternal,
}: {
title: string
path: string
icon: ReactNode
isExternal?: boolean
}) =>
isExternal ? (
<a
className="default-transition flex w-full items-center justify-between border-t border-th-fgd-4 px-2 py-3 text-th-fgd-2 hover:text-th-fgd-1"
href={path}
target="_blank"
rel="noopener noreferrer"
>
<div className="flex items-center">
{icon}
<span className="ml-1.5">{title}</span>
</div>
<ChevronRightIcon className="h-5 w-5" />
</a>
) : (
<Link href={path} shallow={true}>
<a className="default-transition flex w-full items-center justify-between border-t border-th-fgd-4 px-2 py-3 text-th-fgd-2 hover:text-th-fgd-1">
<div className="flex items-center">
{icon}
<span className="ml-1.5">{title}</span>
</div>
<ChevronRightIcon className="h-5 w-5" />
</a>
</Link>
)