{t('page.titles.about')}

import React, { useCallback, useEffect, useState } from 'react' import Head from 'next/head' import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import api from '~utils/api' import { printError } from '~utils/reportError' import { AboutTabs } from '~utils/enums' import setUserToken from '~utils/setUserToken' import AboutPage from '~components/AboutPage' import UpdatesPage from '~components/UpdatesPage' import RoadmapPage from '~components/RoadmapPage' import SegmentedControl from '~components/SegmentedControl' import Segment from '~components/Segment' import type { NextApiRequest, NextApiResponse } from 'next' interface Props {} const AboutRoute: React.FC = (props: Props) => { // Set up router const router = useRouter() // Import translations const { t } = useTranslation('common') const [currentTab, setCurrentTab] = useState(AboutTabs.About) function handleTabClicked(event: React.ChangeEvent) { const path = [ router.asPath.split('/').filter((el) => el != '')[1], event.target.value, ].join('/') // TODO: Decide if we want /about/changlog or /changelog // TODO: Then, set up Next.js rewrites switch (event.target.value) { case 'about': // router.replace(path) setCurrentTab(AboutTabs.About) break case 'updates': // router.replace(path) setCurrentTab(AboutTabs.Updates) break case 'roadmap': // router.replace(path) setCurrentTab(AboutTabs.Roadmap) break default: break } } const currentSection = () => { switch (currentTab) { case AboutTabs.About: return case AboutTabs.Updates: return case AboutTabs.Roadmap: return } } return (

{/* HTML */} {t('page.titles.about')} {/* OpenGraph */} {/* Twitter */}

{t('about.segmented_control.about')} {t('about.segmented_control.updates')} {t('about.segmented_control.roadmap')} {currentSection()}

) } export const getServerSidePaths = async () => { return { paths: [], fallback: true, } } // prettier-ignore export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => { // Set headers for server-side requests setUserToken(req, res) // Fetch and organize raids return { props: { ...(await serverSideTranslations(locale, ['common', 'roadmap'])), // Will be passed to the page component as props }, } } export default AboutRoute