68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import PerpMarketsTable from './PerpMarketsTable'
|
|
import { useTranslation } from 'react-i18next'
|
|
import dayjs from 'dayjs'
|
|
import relativeTime from 'dayjs/plugin/relativeTime'
|
|
import mangoStore from '@store/mangoStore'
|
|
import ButtonGroup from '@components/forms/ButtonGroup'
|
|
import RecentGainersLosers from './RecentGainersLosers'
|
|
import Spot from './Spot'
|
|
dayjs.extend(relativeTime)
|
|
|
|
const TABS = ['spot', 'perp']
|
|
|
|
const Explore = () => {
|
|
const { t } = useTranslation(['common'])
|
|
const perpStats = mangoStore((s) => s.perpStats.data)
|
|
const [activeTab, setActiveTab] = useState('spot')
|
|
|
|
useEffect(() => {
|
|
if (!perpStats || !perpStats.length) {
|
|
const actions = mangoStore.getState().actions
|
|
actions.fetchPerpStats()
|
|
}
|
|
}, [perpStats])
|
|
|
|
return (
|
|
<>
|
|
<div className="px-4 pt-8 md:px-6">
|
|
<h2 className="mb-4 text-center text-lg md:text-left xl:text-xl">
|
|
{t('explore')}
|
|
</h2>
|
|
</div>
|
|
<RecentGainersLosers />
|
|
<div className="mb-6 flex flex-col px-4 pt-8 md:mb-0 md:flex-row md:items-center md:space-x-4 md:px-6">
|
|
<h2 className="mb-3 text-center text-lg md:mb-0 md:text-left xl:text-xl">
|
|
{t('markets')}
|
|
</h2>
|
|
<div className="mx-auto max-w-[112px]">
|
|
<ButtonGroup
|
|
activeValue={activeTab}
|
|
onChange={(t) => setActiveTab(t)}
|
|
names={TABS.map((tab) => t(tab))}
|
|
values={TABS}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<TabContent activeTab={activeTab} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Explore
|
|
|
|
const TabContent = ({ activeTab }: { activeTab: string }) => {
|
|
switch (activeTab) {
|
|
case 'spot':
|
|
return <Spot />
|
|
case 'perp':
|
|
return (
|
|
<div className="mt-6 border-t border-th-bkg-3">
|
|
<PerpMarketsTable />
|
|
</div>
|
|
)
|
|
default:
|
|
return <Spot />
|
|
}
|
|
}
|