Added media page and change nav icons

2022-05-03 11:26:52 +09:00
parent 1822e6e46d
commit 8f50fc395e
9 changed files with 91 additions and 7 deletions
@@ -8,7 +8,9 @@
    "stigmata": "Stigmata",
    "elfs": "ELFs",
    "elysian-realm": "Elysian Realm",
-    "wip": "WIP"
+    "wip": "WIP",
+    "media": "Media",
+    "novels": "Novels"
  },
  "nav": {},
  "index": {
@@ -8,7 +8,9 @@
    "weapons": "무기",
    "stigmata": "성흔",
    "elfs": "인형",
-    "wip": "작업중"
+    "wip": "작업중",
+    "media": "미디어",
+    "novels": "소설"
  },
  "battlesuits-list": {
    "heading": "발키리",
@@ -59,6 +59,7 @@ const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
        <NavItem target='stigmata' />
        <NavItem target='elfs' />
        <NavItem target='elysian-realm' />
+        <NavItem target='media' />
      </Box>

      <NextLink
@@ -96,6 +97,7 @@ interface NavItemProps {
    | 'weapons'
    | 'elfs'
    | 'elysian-realm'
+    | 'media'
 }

 const NavItem = ({ target }: NavItemProps) => {
@@ -111,11 +113,7 @@ const NavItem = ({ target }: NavItemProps) => {
          p: 1,
        }}
      >
-        <SquareImageBox
-          size={30}
-          mr={1}
-          src={`${assetsBucketBaseUrl}/honkai3rd/nav-icons/${target}.png`}
-        />
+        <SquareImageBox size={30} mr={1} src={getIconByTarget(target)} />
        <Text
          sx={{
            overflow: 'hidden',
@@ -129,3 +127,14 @@ const NavItem = ({ target }: NavItemProps) => {
    </NextLink>
  )
 }
+
+function getIconByTarget(target: string) {
+  switch (target) {
+    case 'versions':
+      return `${assetsBucketBaseUrl}/honkai3rd/nav-icons/versions.webp`
+    case 'media':
+      return `${assetsBucketBaseUrl}/honkai3rd/nav-icons/grand-instructor.webp`
+    default:
+      return `${assetsBucketBaseUrl}/honkai3rd/nav-icons/${target}.png`
+  }
+}
@@ -0,0 +1,71 @@
+/** @jsxImportSource theme-ui */
+import {
+  Box,
+  Heading,
+  Flex,
+  Card,
+  Image,
+  Paragraph,
+  Link,
+} from '@theme-ui/components'
+import Breadcrumb from '../../../components/organisms/Breadcrumb'
+import { useTranslation } from '../../../lib/i18n'
+import Head from '../../../components/atoms/Head'
+import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
+import { assetsBucketBaseUrl } from 'lib/consts'
+import { getI18NProps } from 'server/i18n'
+import { NextPageContext } from 'next'
+
+const MediaPage = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Honkai3rdLayout>
+      <Head
+        title={`${t('common.media')} - ${t('common.honkai-3rd')} - ${t(
+          'common.abyss-lab'
+        )}`}
+        description={''}
+      />
+      <Box p={3}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            { href: '/honkai3rd/media', label: t('common.media') },
+          ]}
+        />
+
+        <Heading as='h1'>{t('common.media')}</Heading>
+        <Heading as='h2'>{t('common.novels')}</Heading>
+
+        <Flex sx={{ mb: 3 }}>
+          <Link href={'/ko-KR/honkai3rd/novels/ae'} target='_blank'>
+            <Card p={2}>
+              <Image
+                width={300}
+                src={`${assetsBucketBaseUrl}/honkai3rd/novels/ae-ko-KR-banner.png`}
+                alt='네겐트로피 Beta'
+                sx={{ borderRadius: 5 }}
+              />
+              <Box sx={{ textAlign: 'center' }}>🇰🇷 네겐트로피 Beta(작업중)</Box>
+            </Card>
+          </Link>
+        </Flex>
+
+        <Paragraph>
+          Other novels and English verions will be available one day.
+        </Paragraph>
+      </Box>
+    </Honkai3rdLayout>
+  )
+}
+
+export default MediaPage
+
+export async function getStaticProps({ locale }: NextPageContext) {
+  return {
+    props: {
+      ...(await getI18NProps(locale)),
+    },
+  }
+}