Renew index pages

src/pages/honkai3rd/index.tsx

@@ -1,25 +1,33 @@
 /** @jsxImportSource theme-ui */
-import { Box, Heading, Link } from '@theme-ui/components'
+import { Box, Heading, Text, Flex } from '@theme-ui/components'
 import Image from 'next/image'
-import NextLink from 'next/link'
 import Breadcrumb from '../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../components/organisms/Honkai3rdNavigator'
 import { NextPageContext } from 'next'
 import { getI18NProps } from '../../server/i18n'
-
-const updateNotes = [
-  ['v5.3', 'https://honkaiimpact3.mihoyo.com/global/en-us/news/17390'],
-  ['v5.2', 'https://honkaiimpact3.mihoyo.com/global/en-us/news/16625'],
-]
+import { useTranslation } from '../../lib/i18n'
+import PageLink from '../../components/atoms/PageLink'
+import SquareImageBox from '../../components/atoms/SquareImageBox'
 
 const Honkai3rdIndexPage = () => {
+  const { t } = useTranslation()
+
   return (
     <Box>
       <Honkai3rdNavigator />
 
       <Box p={3}>
-        <Breadcrumb items={[{ href: 'honkai3rd', label: 'Honkai 3rd' }]} />
-        <Heading as='h1'>Honkai 3rd</Heading>
+        <Breadcrumb
+          items={[{ href: 'honkai3rd', label: t('breadcrumb.honkai-3rd') }]}
+        />
+        <Heading as='h1'>{t('nav.honkai-3rd')}</Heading>
+        <Box mb={3}>
+          <NavItem target='versions' />
+          <NavItem target='battlesuits' />
+          <NavItem target='weapons' />
+          <NavItem target='stigmata' />
+          <NavItem target='elfs' />
+        </Box>
         <Box mb={3} sx={{ position: 'relative', minHeight: 300 }}>
           <Image
             alt='Honkai 3rd Wallpaper'
@@ -29,37 +37,6 @@ const Honkai3rdIndexPage = () => {
             layout='responsive'
           />
         </Box>
-        <Box mb={3}>
-          <Box>
-            <NextLink href={`/honkai3rd/battlesuits`} passHref>
-              <Link>Battlesuits</Link>
-            </NextLink>
-          </Box>
-          <Box>
-            <NextLink href={`/honkai3rd/stigmata`} passHref>
-              <Link>Stigmata</Link>
-            </NextLink>
-          </Box>
-          <Box>
-            <NextLink href={`/honkai3rd/weapons`} passHref>
-              <Link>Weapons</Link>
-            </NextLink>
-          </Box>
-        </Box>
-        <Box>
-          <Heading>Updates</Heading>
-          <Box>
-            {updateNotes.map(([version, href]) => {
-              return (
-                <Box key={version}>
-                  <Link href={href} target='_blank'>
-                    {version} Update Notes
-                  </Link>
-                </Box>
-              )
-            })}
-          </Box>
-        </Box>
       </Box>
     </Box>
   )
@@ -74,3 +51,27 @@ export async function getStaticProps({ locale }: NextPageContext) {
 }
 
 export default Honkai3rdIndexPage
+
+interface NavItemProps {
+  target: 'versions' | 'battlesuits' | 'stigmata' | 'weapons' | 'elfs'
+}
+
+const NavItem = ({ target }: NavItemProps) => {
+  const { t } = useTranslation()
+  return (
+    <Box mb={2}>
+      <PageLink href={`/honkai3rd/${target}`}>
+        <Box sx={{ display: 'inline-block' }}>
+          <Flex sx={{ alignItems: 'center' }}>
+            <SquareImageBox
+              size={40}
+              mr={1}
+              src={`/assets/honkai3rd/nav-icons/${target}.png`}
+            />
+            <Text sx={{ fontSize: 3 }}>{t(`nav.${target}`)}</Text>
+          </Flex>
+        </Box>
+      </PageLink>
+    </Box>
+  )
+}

src/pages/index.tsx

@@ -1,20 +1,24 @@
 /** @jsxImportSource theme-ui */
-import { Box } from '@theme-ui/components'
-import Link from 'next/link'
+import { Box, Text } from '@theme-ui/components'
+import PageLink from '../components/atoms/PageLink'
 import RootNavigator from '../components/organisms/RootNavigator'
 
 const IndexPage = () => {
   return (
     <Box>
       <RootNavigator />
-
-      <div>
-        <Link href='/honkai3rd'>
-          <a>
-            <h2>Honkai 3rd</h2>
-          </a>
-        </Link>
-      </div>
+      <Box sx={{ p: 3 }}>
+        <Box>
+          <PageLink href='/honkai3rd'>
+            <Text sx={{ fontSize: 3 }}>Honkai 3rd</Text>
+          </PageLink>
+        </Box>
+        <Box>
+          <PageLink href='/genshin'>
+            <Text sx={{ fontSize: 3 }}>Genshin (Under Construction)</Text>
+          </PageLink>
+        </Box>
+      </Box>
     </Box>
   )
 }