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