diff --git a/components/AboutHead/index.tsx b/components/AboutHead/index.tsx new file mode 100644 index 00000000..0aa45ec7 --- /dev/null +++ b/components/AboutHead/index.tsx @@ -0,0 +1,53 @@ +import React, { useEffect, useState } from 'react' +import Head from 'next/head' +import { useTranslation } from 'next-i18next' + +interface Props { + page: string +} + +const AboutHead = ({ page }: Props) => { + // Import translations + const { t } = useTranslation('common') + + // State + const [currentPage, setCurrentPage] = useState('about') + + // Hooks + useEffect(() => { + setCurrentPage(page) + }, [page]) + + return ( + + {/* HTML */} + {t(`page.titles.${currentPage}`)} + + + + + {/* OpenGraph */} + + + + + + {/* Twitter */} + + + + + + ) +} + +export default AboutHead diff --git a/components/AboutPage/index.tsx b/components/AboutPage/index.tsx index 8519ef6f..14307f98 100644 --- a/components/AboutPage/index.tsx +++ b/components/AboutPage/index.tsx @@ -1,7 +1,5 @@ import React from 'react' import Link from 'next/link' - -import { useRouter } from 'next/router' import { Trans, useTranslation } from 'next-i18next' import ShareIcon from '~public/icons/Share.svg' diff --git a/pages/about.tsx b/pages/about.tsx index e9c5d02a..e708e89c 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -8,6 +8,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { AboutTabs } from '~utils/enums' import { setHeaders } from '~utils/userToken' +import AboutHead from '~components/AboutHead' import AboutPage from '~components/AboutPage' import UpdatesPage from '~components/UpdatesPage' import RoadmapPage from '~components/RoadmapPage' @@ -16,7 +17,9 @@ import Segment from '~components/Segment' import type { NextApiRequest, NextApiResponse } from 'next' -interface Props {} +interface Props { + page?: string +} const AboutRoute: React.FC = (props: Props) => { // Set up router @@ -48,6 +51,12 @@ const AboutRoute: React.FC = (props: Props) => { } }, [router.asPath]) + useEffect(() => { + if (props.page && ['about', 'updates', 'roadmap'].includes(props.page)) { + setCurrentPage(props.page) + } + }, [props.page]) + function handleTabClicked(event: React.ChangeEvent) { const parts = router.asPath.split('/') const path = `/${event.target.value}` @@ -84,40 +93,13 @@ const AboutRoute: React.FC = (props: Props) => { } } + function pageHead() { + return + } + return (
- - {/* HTML */} - {t(`page.titles.${currentPage}`)} - - - - - {/* OpenGraph */} - - - - - - {/* Twitter */} - - - - - - + {pageHead()}