feat: recommended markets page boilerplate (#7702)

src/assets/translations/en/main.json

@@ -2571,5 +2571,11 @@
     "emissionsPoolHelper": "Emissions Pool (This Epoch)",
     "foxBurnAmount": "FOX Burn Amount (This Epoch)",
     "pendingDistribution": "Pending Distribution"
+  },
+  "markets": {
+    "recommended": "Recommended",
+    "watchlist": "My Watchlist",
+    "categories": "Categories",
+    "marketsBody": "Nunc vel efficitur ligula, vel sagittis est. Morbi et sapien a ligula venenatis consequat."
   }
 }

src/pages/Markets/MarketsHeader.tsx

@@ -0,0 +1,66 @@
+import { Container, Heading, Stack } from '@chakra-ui/react'
+import { useCallback, useMemo } from 'react'
+import { useTranslate } from 'react-polyglot'
+import { useHistory } from 'react-router'
+import { Display } from 'components/Display'
+import { PageBackButton, PageHeader } from 'components/Layout/Header/PageHeader'
+import type { TabItem } from 'components/TabMenu/TabMenu'
+import { TabMenu } from 'components/TabMenu/TabMenu'
+import { Text } from 'components/Text'
+
+const containerPadding = { base: 6, '2xl': 8 }
+const containerPaddingTop = { base: 0, md: 8 }
+
+export const MarketsHeader = () => {
+  const translate = useTranslate()
+  const history = useHistory()
+  const NavItems: TabItem[] = useMemo(() => {
+    return [
+      {
+        label: 'markets.recommended',
+        path: '/markets/recommended',
+        color: 'blue',
+      },
+      {
+        label: 'markets.watchlist',
+        path: '/markets/watchlist',
+        color: 'blue',
+      },
+      {
+        label: 'markets.categories',
+        path: '/markets/categories',
+        color: 'blue',
+      },
+    ]
+  }, [])
+
+  const handleBack = useCallback(() => {
+    history.push('/explore')
+  }, [history])
+
+  return (
+    <>
+      <Display.Mobile>
+        <PageHeader>
+          <PageHeader.Left>
+            <PageBackButton onBack={handleBack} />
+          </PageHeader.Left>
+          <PageHeader.Middle>
+            <PageHeader.Title>{translate('navBar.markets')}</PageHeader.Title>
+          </PageHeader.Middle>
+        </PageHeader>
+      </Display.Mobile>
+      <Stack mb={4}>
+        <Container maxWidth='container.4xl' px={containerPadding} pt={containerPaddingTop} pb={4}>
+          <Display.Desktop>
+            <Stack>
+              <Heading>{translate('navBar.markets')}</Heading>
+              <Text color='text.subtle' translation='markets.marketsBody' />
+            </Stack>
+          </Display.Desktop>
+        </Container>
+        <TabMenu items={NavItems} />
+      </Stack>
+    </>
+  )
+}

src/pages/Markets/MarketsPage.tsx

@@ -1 +1,20 @@
-export const MarketsPage = () => null
+import { Redirect, Route, Switch, useRouteMatch } from 'react-router'
+
+import { Recommended } from './Recommended'
+
+export const MarketsPage = () => {
+  const { path } = useRouteMatch()
+
+  return (
+    <Switch>
+      <Route exact path={`${path}`}>
+        <Redirect to={`${path}/recommended`} />
+      </Route>
+      <Route exact path={`${path}/recommended`}>
+        <Recommended />
+      </Route>
+      <Route path={`${path}/watchlist`}></Route>
+      <Route path={`${path}/categories`}></Route>
+    </Switch>
+  )
+}

src/pages/Markets/Recommended.tsx

@@ -0,0 +1,18 @@
+import { useMemo } from 'react'
+import { useTranslate } from 'react-polyglot'
+import { Main } from 'components/Layout/Main'
+import { SEO } from 'components/Layout/Seo'
+
+import { MarketsHeader } from './MarketsHeader'
+
+export const Recommended = () => {
+  const translate = useTranslate()
+
+  const headerComponent = useMemo(() => <MarketsHeader />, [])
+
+  return (
+    <Main headerComponent={headerComponent} isSubPage>
+      <SEO title={translate('navBar.markets')} />
+    </Main>
+  )
+}