Renew index pages

public/locales/en-US/common.json

@@ -15,6 +15,14 @@
     "elfs": "ELFs",
     "versions": "Versions"
   },
+  "index": {
+    "honkai-3rd": "Honkai 3rd",
+    "battlesuits": "Battlesuits",
+    "stigmata": "Stigmata",
+    "weapons": "Weapons",
+    "elfs": "ELFs",
+    "versions": "Versions"
+  },
   "battlesuits-list": {
     "heading": "Battlesuits",
     "filter-by-features": "Filter by Features",

src/components/organisms/Honkai3rdNavigator.tsx

@@ -1,8 +1,9 @@
 /** @jsxImportSource theme-ui */
-import { NavLink, Heading, Flex } from '@theme-ui/components'
+import { NavLink, Heading, Flex, Text } from '@theme-ui/components'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
 import { useTranslation } from '../../lib/i18n'
+import SquareImageBox from '../atoms/SquareImageBox'
 
 const Honkai3rdNavigator = () => {
   const router = useRouter()
@@ -24,31 +25,11 @@ const Honkai3rdNavigator = () => {
       </Flex>
       <Flex sx={{ justifyContent: 'space-between', flex: 1 }}>
         <Flex sx={{ height: 40, alignItems: 'center' }}>
-          <NextLink href='/honkai3rd/versions' passHref>
-            <NavLink mr={3} sx={{ fontFamily: 'monospace' }}>
-              {t('nav.versions')}
-            </NavLink>
-          </NextLink>
-          <NextLink href='/honkai3rd/battlesuits' passHref>
-            <NavLink mr={3} sx={{ fontFamily: 'monospace' }}>
-              {t('nav.battlesuits')}
-            </NavLink>
-          </NextLink>
-          <NextLink href='/honkai3rd/weapons' passHref>
-            <NavLink mr={3} sx={{ fontFamily: 'monospace' }}>
-              {t('nav.weapons')}
-            </NavLink>
-          </NextLink>
-          <NextLink href='/honkai3rd/stigmata' passHref>
-            <NavLink mr={3} sx={{ fontFamily: 'monospace' }}>
-              {t('nav.stigmata')}
-            </NavLink>
-          </NextLink>
-          <NextLink href='/honkai3rd/elfs' passHref>
-            <NavLink mr={3} sx={{ fontFamily: 'monospace' }}>
-              {t('nav.elfs')}
-            </NavLink>
-          </NextLink>
+          <NavItem target='versions' />
+          <NavItem target='battlesuits' />
+          <NavItem target='weapons' />
+          <NavItem target='stigmata' />
+          <NavItem target='elfs' />
         </Flex>
         <Flex sx={{ height: 40, alignItems: 'center' }}>
           <NextLink
@@ -57,7 +38,13 @@ const Honkai3rdNavigator = () => {
             as={asPath}
             passHref
           >
-            <NavLink>
+            <NavLink
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
               {locale === 'en-US' ? (
                 '🇺🇸'
               ) : (
@@ -74,3 +61,39 @@ const Honkai3rdNavigator = () => {
 }
 
 export default Honkai3rdNavigator
+
+interface NavItemProps {
+  target: 'versions' | 'battlesuits' | 'stigmata' | 'weapons' | 'elfs'
+}
+
+const NavItem = ({ target }: NavItemProps) => {
+  const { t } = useTranslation()
+  return (
+    <NextLink href={`/honkai3rd/${target}`} passHref>
+      <NavLink
+        mr={3}
+        sx={{
+          fontFamily: 'monospace',
+          display: 'flex',
+          alignItems: 'center',
+          overflow: 'hidden',
+        }}
+      >
+        <SquareImageBox
+          size={20}
+          mr={1}
+          src={`/assets/honkai3rd/nav-icons/${target}.png`}
+        />
+        <Text
+          sx={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {t(`nav.${target}`)}
+        </Text>
+      </NavLink>
+    </NextLink>
+  )
+}

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>
   )
 }