retr0volkov/abyss-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve index

Browse Source
This commit is contained in:
Sakura Knoll
2023-07-15 13:52:40 +09:00 Unverified
parent 730dcfac22
commit 46e16d54a9
1 changed files with 72 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/honkai3rd/index.tsx
+72 -3
View File
@@ -1,5 +1,5 @@
/** @jsxImportSource theme-ui */ /** @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 { BattlesuitData } from '../../lib/honkai3rd/battlesuits'
import { WeaponData } from '../../lib/honkai3rd/weapons' import { WeaponData } from '../../lib/honkai3rd/weapons'
import { VersionData } from '../../lib/honkai3rd/versions' import { VersionData } from '../../lib/honkai3rd/versions'
@@ -8,7 +8,13 @@ import { NextPageContext } from 'next'
import { useTranslation } from '../../lib/i18n' import { useTranslation } from '../../lib/i18n'
import Head from '../../components/atoms/Head' import Head from '../../components/atoms/Head'
import { StigmataSet } from '../../lib/honkai3rd/stigmata' 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 { interface VersionIndexPageProps {
versionDataList: VersionData[] versionDataList: VersionData[]
@@ -21,6 +27,10 @@ interface VersionIndexPageProps {
const HomePage = ({}: VersionIndexPageProps) => { const HomePage = ({}: VersionIndexPageProps) => {
const { t } = useTranslation() const { t } = useTranslation()
const router = useRouter()
const { pathname, asPath, query, locale } = router
const [colorMode, setColorMode] = useColorMode()
return ( return (
<Box> <Box>
<Head title={`${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`} canonicalHref={`/honkai3rd`} /> <Head title={`${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`} canonicalHref={`/honkai3rd`} />
@@ -28,7 +38,66 @@ const HomePage = ({}: VersionIndexPageProps) => {
<Box p={2}> <Box p={2}>
<Head title={`${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`} canonicalHref={`/honkai3rd`} /> <Head title={`${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`} canonicalHref={`/honkai3rd`} />
<Honkai3rdNavigator /> <Heading as="h2">
<PageLink href="/">Abyss Lab</PageLink>
</Heading>
<Heading as="h1">Honkai 3rd Data</Heading>
<Paragraph mb={3}>Welcome, Captain!</Paragraph>
<Box sx={{ mb: 3 }}>
<NavItem target="battlesuits" size="lg" />
<NavItem target="weapons" size="lg" />
<NavItem target="stigmata" size="lg" />
<NavItem target="elfs" size="lg" />
<NavItem target="elysian-realm" size="lg" />
<NavItem target="media" size="lg" />
</Box>
<NextLink href={{ pathname, query }} locale={locale === 'en-US' ? 'ko-KR' : 'en-US'} as={asPath} passHref>
<NavLink
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
display: 'flex',
alignItems: 'center',
px: 2,
mb: 2
}}
>
<Text>{locale === 'en-US' ? '🇺🇸 English(US)' : '🇰🇷 한국어'}</Text>
<Icon path={mdiMenuSwap} size="20px" />
</NavLink>
</NextLink>
<Box>
<Flex
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'left',
mb: 2
}}
>
<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> </Box>
</Box> </Box>
) )