From 46e16d54a90be5530f00b9d8139462cafc2b23a9 Mon Sep 17 00:00:00 2001 From: Sakura Knoll Date: Sat, 15 Jul 2023 13:52:40 +0900 Subject: [PATCH] Improve index --- src/pages/honkai3rd/index.tsx | 75 +++++++++++++++++++++++++++++++++-- 1 file changed, 72 insertions(+), 3 deletions(-) diff --git a/src/pages/honkai3rd/index.tsx b/src/pages/honkai3rd/index.tsx index da912438..ec111ab8 100644 --- a/src/pages/honkai3rd/index.tsx +++ b/src/pages/honkai3rd/index.tsx @@ -1,5 +1,5 @@ /** @jsxImportSource theme-ui */ -import { Box } from '@theme-ui/components' +import { Box, Heading, Paragraph, NavLink, Flex, Label, Switch, Text } from '@theme-ui/components' import { BattlesuitData } from '../../lib/honkai3rd/battlesuits' import { WeaponData } from '../../lib/honkai3rd/weapons' import { VersionData } from '../../lib/honkai3rd/versions' @@ -8,7 +8,13 @@ import { NextPageContext } from 'next' import { useTranslation } from '../../lib/i18n' import Head from '../../components/atoms/Head' import { StigmataSet } from '../../lib/honkai3rd/stigmata' -import Honkai3rdNavigator from '../../components/organisms/Honkai3rdNavigator' +import NavItem from '../../components/atoms/NavItem' +import NextLink from 'next/link' +import Icon from '@mdi/react' +import { useRouter } from 'next/router' +import { mdiMenuSwap } from '@mdi/js' +import { useColorMode } from 'theme-ui' +import PageLink from '../../components/atoms/PageLink' interface VersionIndexPageProps { versionDataList: VersionData[] @@ -21,6 +27,10 @@ interface VersionIndexPageProps { const HomePage = ({}: VersionIndexPageProps) => { const { t } = useTranslation() + const router = useRouter() + const { pathname, asPath, query, locale } = router + + const [colorMode, setColorMode] = useColorMode() return ( @@ -28,7 +38,66 @@ const HomePage = ({}: VersionIndexPageProps) => { - + + Abyss Lab + + Honkai 3rd Data + + Welcome, Captain! + + + + + + + + + + + + {locale === 'en-US' ? 'πŸ‡ΊπŸ‡Έ English(US)' : 'πŸ‡°πŸ‡· ν•œκ΅­μ–΄'} + + + + + + + { + setColorMode(event.target.checked ? 'dark' : 'default') + }} + sx={{ + width: 50, + 'input ~ &': { + backgroundColor: 'muted' + }, + 'input:checked ~ &': { + backgroundColor: 'primary' + } + }} + /> + + + + )