Add about page

src/components/layouts/Honkai3rdLayout.tsx

@@ -1,10 +1,10 @@
 /** @jsxImportSource theme-ui */
-
-import { mdiArrowUp, mdiMenu } from '@mdi/js'
+import { mdiArrowUp, mdiDiscord, mdiGithub, mdiLink, mdiMenu } from '@mdi/js'
 import Icon from '@mdi/react'
 import React, { useCallback, useRef, useState } from 'react'
-import { Box, Flex, IconButton } from 'theme-ui'
+import { Box, Flex, IconButton, Link, Text } from 'theme-ui'
 import Honkai3rdNavigator from '../organisms/Honkai3rdNavigator'
+import NextLink from 'next/link'
 
 const Honkai3rdLayout: React.FC = ({ children }) => {
   const [hiddenMobileNav, setHiddenMobileNav] = useState(true)
@@ -102,6 +102,71 @@ const Honkai3rdLayout: React.FC = ({ children }) => {
         </Flex>
 
         {children}
+
+        <Box py={3}>
+          <Flex
+            sx={{
+              justifyContent: 'center',
+              alignItems: 'center',
+              flexDirection: ['column', 'column', 'column', 'row'],
+            }}
+          >
+            <NextLink href='/honkai3rd/about' passHref>
+              <Link
+                sx={{
+                  mb: 2,
+                }}
+              >
+                About Abyss Lab
+              </Link>
+            </NextLink>
+            <Text sx={{ mx: 2, display: ['none', 'none', 'none', 'block'] }}>
+              /
+            </Text>
+            <Link
+              href='https://github.com/sakura-knoll/abyss-lab'
+              target='_blank'
+              sx={{
+                mb: 2,
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <Icon path={mdiGithub} size='20px' />
+              <Text sx={{ ml: 1 }}>GitHub(Source Code)</Text>
+            </Link>
+            <Text sx={{ mx: 2, display: ['none', 'none', 'none', 'block'] }}>
+              /
+            </Text>
+            <Link
+              href='https://discord.gg/UnrM9T9PRs'
+              target='_blank'
+              sx={{
+                mb: 2,
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <Icon path={mdiDiscord} size='20px' />
+              <Text sx={{ ml: 1 }}>Discord (EN)</Text>
+            </Link>
+            <Text sx={{ mx: 2, display: ['none', 'none', 'none', 'block'] }}>
+              /
+            </Text>
+            <Link
+              href='https://arca.live/b/cherryhill'
+              target='_blank'
+              sx={{
+                mb: 2,
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <Icon path={mdiLink} size='20px' />
+              <Text sx={{ ml: 1 }}>arca.live (KR)</Text>
+            </Link>
+          </Flex>
+        </Box>
       </Box>
     </Flex>
   )

src/components/organisms/Honkai3rdNavigator.tsx

@@ -9,6 +9,7 @@ import {
   Flex,
   IconButton,
   Switch,
+  Label,
 } from '@theme-ui/components'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
@@ -86,23 +87,34 @@ const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
           <Icon path={mdiMenuSwap} size='20px' />
         </NavLink>
       </NextLink>
-
       <Box>
-        <Switch
-          checked={colorMode === 'dark'}
-          onChange={(event) => {
-            setColorMode(event.target.checked ? 'dark' : 'default')
-          }}
+        <Flex
           sx={{
-            'input ~ &': {
-              backgroundColor: 'muted',
-            },
-            'input:checked ~ &': {
-              backgroundColor: 'primary',
-            },
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'left',
+            mb: 2,
           }}
-          label={colorMode === 'default' ? '☀️' : '🌙'}
-        />
+        >
+          <Box>
+            <Switch
+              checked={colorMode === 'dark'}
+              onChange={(event) => {
+                setColorMode(event.target.checked ? 'dark' : 'default')
+              }}
+              sx={{
+                width: 50,
+                'input ~ &': {
+                  backgroundColor: 'muted',
+                },
+                'input:checked ~ &': {
+                  backgroundColor: 'primary',
+                },
+              }}
+            />
+          </Box>
+          <Label>{colorMode === 'default' ? '☀️' : '🌙'}</Label>
+        </Flex>
       </Box>
     </Box>
   )

src/pages/honkai3rd/about.tsx

@@ -0,0 +1,65 @@
+/** @jsxImportSource theme-ui */
+import { Box, Heading, Text, Paragraph } 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 { getI18NProps } from '../../server/i18n'
+import { NextPageContext } from 'next'
+const AboutPage = () => {
+  const { t } = useTranslation()
+  return (
+    <Honkai3rdLayout>
+      <Head
+        title={`${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
+        canonicalHref={`/honkai3rd`}
+      />
+
+      <Box p={3}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            { href: '/honkai3rd/about', label: 'About Abyss Lab' },
+          ]}
+        />
+        <Heading as='h1'>About Abyss Lab</Heading>
+        <Paragraph mb={3}>
+          Abyss Lab is an unofficial Honkai Impact 3rd wiki. I, Sakura Knoll,
+          have been making this for fun. If you find any issues or idea, please
+          contact me via Github Issue Tracker or Discord.
+        </Paragraph>
+
+        <Heading as='h2' mb={3}>
+          Copyright / License
+        </Heading>
+
+        <Heading as='h3'>Game Data</Heading>
+        <Paragraph mb={3}>
+          All game images and game data belong to{' '}
+          <Text sx={{ fontWeight: 'bold' }}>miHoYo Co., Ltd</Text>. There is no
+          license I can provide. I&apos;m using their assets for educational and
+          research purpose{' '}
+          <Text sx={{ fontWeight: 'bold' }}>
+            without any permissions from them
+          </Text>
+          .
+        </Paragraph>
+        <Heading as='h3'>Other Resources</Heading>
+        <Paragraph>
+          Copyright 2021-2022 Sakura Knoll, Published under MIT License.
+        </Paragraph>
+      </Box>
+    </Honkai3rdLayout>
+  )
+}
+
+export async function getStaticProps({ locale }: NextPageContext) {
+  return {
+    props: {
+      ...(await getI18NProps(locale)),
+    },
+  }
+}
+
+export default AboutPage