import { useState } from 'react' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { useTranslation } from 'next-i18next' import { PerpMarketsTable, SpotMarketsTable } from '../components/MarketsTable' import Tabs from '../components/Tabs' import SwipeableTabs from '../components/mobile/SwipeableTabs' import Swipeable from '../components/mobile/Swipeable' import { useViewport } from '../hooks/useViewport' import { breakpoints } from '../components/TradePageGrid' const TABS = ['futures', 'spot'] export async function getStaticProps({ locale }) { return { props: { ...(await serverSideTranslations(locale, [ 'common', 'delegate', 'profile', ])), // Will be passed to the page component as props }, } } export default function Markets() { const [activeTab, setActiveTab] = useState('futures') const [viewIndex, setViewIndex] = useState(0) const { t } = useTranslation(['common']) const { width } = useViewport() const isMobile = width ? width < breakpoints.sm : false const handleTabChange = (tabName) => { setActiveTab(tabName) } const handleChangeViewIndex = (index) => { setViewIndex(index) } return (