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

Restructure layout

Browse Source
This commit is contained in:
Sakura Knoll
2022-03-06 16:27:45 +09:00 Unverified
parent dc1cc4029c
commit 3d8f4f34fe
19 changed files with 204 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layouts/Honkai3rdLayout.tsx
+60
View File
@@ -0,0 +1,60 @@
/** @jsxImportSource theme-ui */
import { mdiMenu } from '@mdi/js'
import Icon from '@mdi/react'
import React, { useCallback, useState } from 'react'
import { Box, Flex, IconButton } from 'theme-ui'
import Honkai3rdNavigator from '../organisms/Honkai3rdNavigator'
const Honkai3rdLayout: React.FC = ({ children }) => {
const [hiddenMobileNav, setHiddenMobileNav] = useState(true)
const close = useCallback(() => {
setHiddenMobileNav(true)
}, [])
return (
<Flex
sx={{
height: '100%',
overflow: 'hidden',
}}
>
<Box
sx={{
width: ['100%', 240],
borderRightWidth: 1,
borderRightStyle: 'solid',
borderRightColor: 'gray.2',
overflowY: 'auto',
overflowX: 'hidden',
display: [hiddenMobileNav ? 'none' : 'block', 'block'],
}}
>
<Honkai3rdNavigator close={close} />
</Box>
<Box sx={{ flex: 1, overflowY: 'auto', overflowX: 'hidden' }}>
<Flex
sx={{
position: 'sticky',
display: ['block', 'none'],
top: 0,
height: 50,
bg: 'rgba(255,255,255,0.8)',
}}
>
<IconButton
sx={{ width: 50, height: 50 }}
onClick={() => setHiddenMobileNav(false)}
>
<Icon path={mdiMenu} size={1} />
</IconButton>
</Flex>
{children}
</Box>
</Flex>
)
}
export default Honkai3rdLayout
src/components/organisms/Honkai3rdNavigator.tsx
+56 -216
View File
@@ -1,159 +1,87 @@
/** @jsxImportSource theme-ui */
import { mdiClose, mdiMenu, mdiMenuRight, mdiMenuSwap } from '@mdi/js'
import { mdiClose, mdiMenuSwap } from '@mdi/js'
import Icon from '@mdi/react'
import {
NavLink,
Heading,
Flex,
Text,
Box,
Flex,
IconButton,
Link,
} from '@theme-ui/components'
import NextLink from 'next/link'
import { useRouter } from 'next/router'
import { useCallback, useState } from 'react'
import { assetsBucketBaseUrl } from '../../lib/consts'
import { useTranslation } from '../../lib/i18n'
import PageLink from '../atoms/PageLink'
import SquareImageBox from '../atoms/SquareImageBox'
const Honkai3rdNavigator = () => {
interface Honkai3rdNavigatorProps {
close: () => void
}
const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
const router = useRouter()
const { pathname, asPath, query, locale } = router
const { t } = useTranslation()
const [hiddenMobileNav, setHiddenMobileNav] = useState(true)
const close = useCallback(() => {
setHiddenMobileNav(true)
}, [])
return (
<Flex
mx={3}
<Box
sx={{
alignItems: 'center',
position: 'sticky',
backgroundColor: 'rgba(255,255,255,0.9)',
top: 0,
zIndex: 100,
p: 2,
}}
>
<Flex
sx={{ alignItems: 'center', height: 50, display: ['none', 'flex'] }}
mr={3}
sx={{
position: 'sticky',
display: ['block', 'none'],
top: 0,
height: 50,
ml: -2,
mt: -2,
}}
>
<Heading margin={0}>
<NextLink href='/' passHref>
<NavLink mr={2}>Abyss Lab</NavLink>
</NextLink>
:
<NextLink href='/honkai3rd' passHref>
<NavLink ml={2}>{t('nav.honkai-3rd')}</NavLink>
</NextLink>
</Heading>
</Flex>
<Flex sx={{ height: 50, display: ['flex', 'none'] }}>
<IconButton
sx={{ width: 50, height: 50, ml: -3 }}
onClick={() => setHiddenMobileNav(false)}
>
<Icon path={mdiMenu} size={1} />
<IconButton sx={{ width: 50, height: 50 }} onClick={close}>
<Icon path={mdiClose} size={1} />
</IconButton>
</Flex>
<Box
sx={{
display: hiddenMobileNav ? 'none' : 'block',
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
overflow: 'auto',
px: 3,
backgroundColor: 'white',
}}
<NextLink href='/' passHref>
<NavLink mb={2}>Abyss Lab</NavLink>
</NextLink>
<Heading mb={3}>
<NextLink href='/honkai3rd' passHref>
<NavLink>{t('nav.honkai-3rd')}</NavLink>
</NextLink>
</Heading>
<Box sx={{ mb: 3 }}>
<NavItem target='versions' />
<NavItem target='battlesuits' />
<NavItem target='weapons' />
<NavItem target='stigmata' />
<NavItem target='elfs' />
</Box>
<NextLink
href={{ pathname, query }}
locale={locale === 'en-US' ? 'ko-KR' : 'en-US'}
as={asPath}
passHref
>
<Flex
<NavLink
sx={{
height: 50,
top: 0,
position: 'sticky',
backgroundColor: 'rgba(255,255,255,0.9)',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
display: 'flex',
alignItems: 'center',
px: 2,
mb: 2,
}}
>
<IconButton
sx={{ width: 50, height: 50, ml: -3 }}
onClick={() => setHiddenMobileNav(true)}
>
<Icon path={mdiClose} size={1} />
</IconButton>
</Flex>
<Box>
<NavMobileItem href='/' label='Abyss Lab Home' close={close} />
<NavMobileItem
href='/honkai3rd'
label={`${t('nav.honkai-3rd')} Home`}
close={close}
/>
<Honkai3rdNavMobileItem target='versions' close={close} />
<Honkai3rdNavMobileItem target='battlesuits' close={close} />
<Honkai3rdNavMobileItem target='weapons' close={close} />
<Honkai3rdNavMobileItem target='stigmata' close={close} />
<Honkai3rdNavMobileItem target='elfs' close={close} />
</Box>
</Box>
<Flex
sx={{
justifyContent: 'space-between',
flex: 1,
}}
>
<Flex
sx={{ height: 40, alignItems: 'center', display: ['none', 'flex'] }}
>
<NavItem target='versions' />
<NavItem target='battlesuits' />
<NavItem target='weapons' />
<NavItem target='stigmata' />
<NavItem target='elfs' />
</Flex>
<Box />
<Flex sx={{ height: 40, alignItems: 'center' }}>
<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',
}}
>
<Text>
{locale === 'en-US' ? (
'🇺🇸'
) : (
<>
🇰🇷 <small>(한글화 작업 중)</small>
</>
)}
</Text>
<Icon path={mdiMenuSwap} size='20px' />
</NavLink>
</NextLink>
</Flex>
</Flex>
</Flex>
<Text>{locale === 'en-US' ? '🇺🇸 English(US)' : '🇰🇷 한국어'}</Text>
<Icon path={mdiMenuSwap} size='20px' />
</NavLink>
</NextLink>
</Box>
)
}
@@ -168,16 +96,16 @@ const NavItem = ({ target }: NavItemProps) => {
return (
<NextLink href={`/honkai3rd/${target}`} passHref>
<NavLink
mr={3}
sx={{
fontFamily: 'monospace',
display: 'flex',
alignItems: 'center',
overflow: 'hidden',
p: 1,
}}
>
<SquareImageBox
size={20}
size={30}
mr={1}
src={`${assetsBucketBaseUrl}/honkai3rd/nav-icons/${target}.png`}
/>
@@ -194,91 +122,3 @@ const NavItem = ({ target }: NavItemProps) => {
</NextLink>
)
}
interface Honkai3rdNavMobileItemProps {
target: 'versions' | 'battlesuits' | 'stigmata' | 'weapons' | 'elfs'
close: () => void
}
const Honkai3rdNavMobileItem = ({
target,
close,
}: Honkai3rdNavMobileItemProps) => {
const { push } = useRouter()
const { t } = useTranslation()
const href = `/honkai3rd/${target}`
return (
<PageLink
href={href}
sx={{
fontFamily: 'monospace',
display: 'flex',
alignItems: 'center',
overflow: 'hidden',
mb: 2,
}}
onClick={(event) => {
event.preventDefault()
close()
push(href)
}}
>
<SquareImageBox
size={40}
mr={1}
src={`${assetsBucketBaseUrl}/honkai3rd/nav-icons/${target}.png`}
/>
<Text
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
fontSize: 3,
}}
>
{t(`nav.${target}`)}
</Text>
</PageLink>
)
}
interface NavMobileItemProps {
href: string
label: string
close: () => void
}
const NavMobileItem = ({ href, label, close }: NavMobileItemProps) => {
const { push } = useRouter()
return (
<Link
href={href}
sx={{
display: 'flex',
alignItems: 'center',
fontFamily: 'monospace',
height: 40,
fontSize: 3,
mb: 2,
}}
onClick={(event) => {
event.preventDefault()
close()
push(href)
}}
>
<Flex
sx={{
width: 40,
height: 40,
alignItems: 'center',
justifyContent: 'center',
mr: 1,
}}
>
<Icon path={mdiMenuRight} size={'30px'} />
</Flex>
<Text>{label}</Text>
</Link>
)
}
src/components/pages/SingleStigmataPage.tsx
+3 -4
View File
@@ -11,12 +11,12 @@ import {
import PageLink from '../../components/atoms/PageLink'
import StigmataCard from '../../components/molecules/StigmataCard'
import Breadcrumb from '../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../components/organisms/Honkai3rdNavigator'
import SecondaryLabel from '../atoms/SecondaryLabel'
import { useRouter } from 'next/router'
import { translate, useTranslation } from '../../lib/i18n'
import Head from '../atoms/Head'
import { assetsBucketBaseUrl } from '../../lib/consts'
import Honkai3rdLayout from '../layouts/Honkai3rdLayout'
export interface SingleStigmataPageProps {
type: 'single'
@@ -48,7 +48,7 @@ const SingleStigmataPage = ({
)
return (
<Box>
<Honkai3rdLayout>
<Head
title={`${t('breadcrumb.honkai-3rd')}: ${stigmataName} - ${t(
'nav.abyss-lab'
@@ -62,7 +62,6 @@ const SingleStigmataPage = ({
stigmataData.def
} / CRT : ${stigmataData.crt}`}
/>
<Honkai3rdNavigator />
<Box p={3}>
<Breadcrumb
items={[
@@ -179,7 +178,7 @@ const SingleStigmataPage = ({
</Card>
)}
</Box>
</Box>
</Honkai3rdLayout>
)
}
src/components/pages/StigmataSetPage.tsx
+3 -4
View File
@@ -4,12 +4,12 @@ import React from 'react'
import PageLink from '../../components/atoms/PageLink'
import StigmataCard from '../../components/molecules/StigmataCard'
import Breadcrumb from '../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../components/organisms/Honkai3rdNavigator'
import { StigmataData, StigmataSet } from '../../lib/honkai3rd/stigmata'
import SecondaryLabel from '../atoms/SecondaryLabel'
import { translate, useTranslation } from '../../lib/i18n'
import { useRouter } from 'next/router'
import Head from '../atoms/Head'
import Honkai3rdLayout from '../layouts/Honkai3rdLayout'
export interface StigmataSetProps {
type: 'set'
@@ -36,7 +36,7 @@ const StigmataSetPage = ({
)
return (
<Box>
<Honkai3rdLayout>
<Head
title={`${t('breadcrumb.honkai-3rd')}: ${stigmataSetName} ${t(
'stigmata-show.stigmata-set'
@@ -45,7 +45,6 @@ const StigmataSetPage = ({
'stigmata-show.stigmata-set'
)} / ${'⭐'.repeat(stigmataSet.rarity)} / ${stigmataSetAltName}`}
/>
<Honkai3rdNavigator />
<Box p={3}>
<Breadcrumb
@@ -167,7 +166,7 @@ const StigmataSetPage = ({
</Paragraph>
</Card>
</Box>
</Box>
</Honkai3rdLayout>
)
}
src/pages/_app.tsx
+2 -1
View File
@@ -5,7 +5,8 @@ import { ThemeProvider } from 'theme-ui'
import { theme } from '../lib/theme'
import NProgress from 'nprogress'
import { useRouter } from 'next/router'
import '../../public/assets/nprogress.css'
import '../styles/nprogress.css'
import '../styles/nextjs.css'
function MyApp({ Component, pageProps }: AppProps) {
const router = useRouter()
src/pages/honkai3rd/battlesuits/[battlesuitId].tsx
+3 -4
View File
@@ -17,7 +17,6 @@ import SecondaryLabel from '../../../components/atoms/SecondaryLabel'
import TypeLabel from '../../../components/atoms/TypeLabel'
import ValkyrieLabel from '../../../components/atoms/ValkyrieLabel'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
import {
BattlesuitData,
battlesuitFeatures,
@@ -35,6 +34,7 @@ import { useRouter } from 'next/router'
import Head from '../../../components/atoms/Head'
import { capitalize } from '../../../lib/string'
import { assetsBucketBaseUrl } from '../../../lib/consts'
import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
interface BattlesuitShowPageProps {
battlesuit: BattlesuitData
@@ -68,7 +68,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
: capitalize(battlesuit.type)
return (
<Box>
<Honkai3rdLayout>
<Head
title={`${t('breadcrumb.honkai-3rd')}: ${battlesuitName} - ${t(
'nav.abyss-lab'
@@ -90,7 +90,6 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
})
.join(', ')}`}
/>
<Honkai3rdNavigator />
<Box p={3}>
<Breadcrumb
@@ -215,7 +214,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
/>
)}
</Box>
</Box>
</Honkai3rdLayout>
)
}
src/pages/honkai3rd/battlesuits/index.tsx
+3 -4
View File
@@ -4,7 +4,6 @@ import { pick } from 'ramda'
import { useCallback, useMemo, useState } from 'react'
import FilterButton from '../../../components/atoms/FilterButton'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
import { listBattlesuits } from '../../../server/data/honkai3rd/battlesuits'
import {
BattlesuitData,
@@ -18,6 +17,7 @@ import { NextPageContext } from 'next'
import { getI18NProps } from '../../../server/i18n'
import { translate, useTranslation } from '../../../lib/i18n'
import Head from '../../../components/atoms/Head'
import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
type BattlesuitListItemData = Pick<
BattlesuitData,
@@ -77,14 +77,13 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
}, [battlesuits, filter])
return (
<Box>
<Honkai3rdLayout>
<Head
title={`${t('breadcrumb.honkai-3rd')}: ${t(
'breadcrumb.battlesuits'
)} - ${t('nav.abyss-lab')}`}
description={t('battlesuits-list.description')}
/>
<Honkai3rdNavigator />
<Box p={3}>
<Breadcrumb
@@ -163,7 +162,7 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
{battlesuitList}
</Flex>
</Box>
</Box>
</Honkai3rdLayout>
)
}
src/pages/honkai3rd/elfs/[elfId].tsx
+3 -4
View File
@@ -12,7 +12,6 @@ import React from 'react'
import BattlesuitFeatureLabel from '../../../components/atoms/BattlesuitFeatureLabel'
import SecondaryLabel from '../../../components/atoms/SecondaryLabel'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
import { ElfData } from '../../../lib/honkai3rd/elfs'
import { getElfById, listElfs } from '../../../server/data/honkai3rd/elfs'
import { generateI18NPaths, getI18NProps } from '../../../server/i18n'
@@ -21,6 +20,7 @@ import { useRouter } from 'next/router'
import Head from '../../../components/atoms/Head'
import { battlesuitFeatures } from '../../../lib/honkai3rd/battlesuits'
import { assetsBucketBaseUrl } from '../../../lib/consts'
import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
interface ElfShowPageProps {
elf: ElfData
@@ -33,7 +33,7 @@ const ElfShowPage = ({ elf }: ElfShowPageProps) => {
const elfName = translate(locale, { 'ko-KR': elf.krName }, elf.name)
return (
<Box>
<Honkai3rdLayout>
<Head
title={`${t('breadcrumb.honkai-3rd')}: ${elfName} - ${t(
'nav.abyss-lab'
@@ -55,7 +55,6 @@ const ElfShowPage = ({ elf }: ElfShowPageProps) => {
})
.join(', ')}`}
/>
<Honkai3rdNavigator />
<Box p={3}>
<Breadcrumb
@@ -139,7 +138,7 @@ const ElfShowPage = ({ elf }: ElfShowPageProps) => {
)
})}
</Box>
</Box>
</Honkai3rdLayout>
)
}
src/pages/honkai3rd/elfs/index.tsx
+3 -6
View File
@@ -4,12 +4,12 @@ import { NextPageContext } from 'next'
import { pick } from 'ramda'
import ElfCard from '../../../components/molecules/ElfCard'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
import { ElfData } from '../../../lib/honkai3rd/elfs'
import { getI18NProps } from '../../../server/i18n'
import { listElfs } from '../../../server/data/honkai3rd/elfs'
import { useTranslation } from '../../../lib/i18n'
import Head from '../../../components/atoms/Head'
import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
interface ElfListPageProps {
elfs: Pick<ElfData, 'id' | 'name' | 'krName'>[]
@@ -19,16 +19,13 @@ const ElfListPage = ({ elfs }: ElfListPageProps) => {
const { t } = useTranslation()
return (
<Box>
<Honkai3rdLayout>
<Head
title={`${t('breadcrumb.honkai-3rd')}: ${t('breadcrumb.elfs')} - ${t(
'nav.abyss-lab'
)}`}
description={t('elfs-list.description')}
/>
<Honkai3rdNavigator />
<Box p={3}>
<Breadcrumb
items={[
@@ -50,7 +47,7 @@ const ElfListPage = ({ elfs }: ElfListPageProps) => {
})}
</Flex>
</Box>
</Box>
</Honkai3rdLayout>
)
}
src/pages/honkai3rd/enemies/index.tsx
+3 -4
View File
@@ -1,13 +1,13 @@
/** @jsxImportSource theme-ui */
import { Box, Heading } from '@theme-ui/components'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
import { NextPageContext } from 'next'
import { getI18NProps } from '../../../server/i18n'
import { useTranslation } from '../../../lib/i18n'
import Head from '../../../components/atoms/Head'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { times } from 'ramda'
import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
const enemyIdList = [
...times((i) => i + 0, 1000).map((i) => {
@@ -110,12 +110,11 @@ const Honkai3rdIndexPage = () => {
}, [validList])
return (
<Box>
<Honkai3rdLayout>
<Head
title={`${t('breadcrumb.honkai-3rd')}: Home - ${t('nav.abyss-lab')}`}
description={t('index.description')}
/>
<Honkai3rdNavigator />
<Box p={3}>
<Breadcrumb
@@ -166,7 +165,7 @@ const Honkai3rdIndexPage = () => {
)
})}
</Box>
</Box>
</Honkai3rdLayout>
)
}
src/pages/honkai3rd/index.tsx
+3 -4
View File
@@ -2,7 +2,6 @@
import { Box, Heading, Text, Flex, Link } from '@theme-ui/components'
import { useCallback, useEffect, useState } from 'react'
import Breadcrumb from '../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../components/organisms/Honkai3rdNavigator'
import { NextPageContext } from 'next'
import { getI18NProps } from '../../server/i18n'
import { useTranslation } from '../../lib/i18n'
@@ -12,6 +11,7 @@ import { mdiGithub } from '@mdi/js'
import { Icon } from '@mdi/react'
import Head from '../../components/atoms/Head'
import { assetsBucketBaseUrl } from '../../lib/consts'
import Honkai3rdLayout from '../../components/layouts/Honkai3rdLayout'
const bannerValkyries = [
'kiana',
@@ -44,12 +44,11 @@ const Honkai3rdIndexPage = () => {
}, [bannerIndex, switchBanner])
return (
<Box>
<Honkai3rdLayout>
<Head
title={`${t('breadcrumb.honkai-3rd')}: Home - ${t('nav.abyss-lab')}`}
description={t('index.description')}
/>
<Honkai3rdNavigator />
<Box p={3}>
<Breadcrumb
@@ -92,7 +91,7 @@ const Honkai3rdIndexPage = () => {
</Link>
</Box>
</Box>
</Box>
</Honkai3rdLayout>
)
}
src/pages/honkai3rd/stigmata/index.tsx
+3 -4
View File
@@ -8,7 +8,6 @@ import PageLink from '../../../components/atoms/PageLink'
import StigmataCard from '../../../components/molecules/StigmataCard'
import StigmataSetCard from '../../../components/molecules/StigmataSetCard'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
import { StigmataData, StigmataSet } from '../../../lib/honkai3rd/stigmata'
import { getI18NProps } from '../../../server/i18n'
import {
@@ -17,6 +16,7 @@ import {
} from '../../../server/data/honkai3rd/stigmata'
import { useTranslation } from 'next-i18next'
import Head from '../../../components/atoms/Head'
import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
interface StigmataListPageProps {
stigmataDataList: Pick<StigmataData, 'id' | 'name' | 'rarity' | 'krName'>[]
@@ -38,14 +38,13 @@ const StigmataListPage = ({
}, [query])
return (
<Box>
<Honkai3rdLayout>
<Head
title={`${t('breadcrumb.honkai-3rd')}: ${t(
'breadcrumb.stigmata'
)} - ${t('nav.abyss-lab')}`}
description={t('stigmata-list.description')}
/>
<Honkai3rdNavigator />
<Box p={3}>
<Breadcrumb
@@ -94,7 +93,7 @@ const StigmataListPage = ({
})}
</Flex>
</Box>
</Box>
</Honkai3rdLayout>
)
}
src/pages/honkai3rd/versions/[versionId].tsx
+3 -4
View File
@@ -3,7 +3,6 @@ import { Box, Heading, Link, Flex, Text, Paragraph } from '@theme-ui/components'
import { NextPageContext } from 'next'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import GanttChart from '../../../components/organisms/GanttChart'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
import {
getVersion,
listVersionData,
@@ -26,6 +25,7 @@ import { useRouter } from 'next/router'
import Head from '../../../components/atoms/Head'
import PageLink from '../../../components/atoms/PageLink'
import { assetsBucketBaseUrl } from '../../../lib/consts'
import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
interface VersionShowPageProps {
versionData: VersionData
@@ -44,7 +44,7 @@ const VersionShowPage = ({
const { locale } = useRouter()
return (
<Box>
<Honkai3rdLayout>
<Head
title={`${t('breadcrumb.honkai-3rd')}: v${versionData.version} - ${t(
'nav.abyss-lab'
@@ -65,7 +65,6 @@ const VersionShowPage = ({
})
.join(',')}`}
/>
<Honkai3rdNavigator />
<Box p={3}>
<Breadcrumb
@@ -221,7 +220,7 @@ const VersionShowPage = ({
<Paragraph mb={4}>{t('versions.supply-events-disclaimer')}</Paragraph>
</Box>
</Box>
</Box>
</Honkai3rdLayout>
)
}
src/pages/honkai3rd/versions/index.tsx
+3 -5
View File
@@ -4,7 +4,6 @@ import NextLink from 'next/link'
import SquareImageBox from '../../../components/atoms/SquareImageBox'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import GanttChart from '../../../components/organisms/GanttChart'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
import { getBattlesuitById } from '../../../server/data/honkai3rd/battlesuits'
import { listSupplyEventsByVersion } from '../../../server/data/honkai3rd/supplyEvents'
import {
@@ -26,6 +25,7 @@ import { useRouter } from 'next/router'
import Head from '../../../components/atoms/Head'
import PageLink from '../../../components/atoms/PageLink'
import { assetsBucketBaseUrl } from '../../../lib/consts'
import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
interface VersionIndexPageProps {
versionDataList: VersionData[]
@@ -46,7 +46,7 @@ const VersionIndexPage = ({
const { locale } = useRouter()
return (
<Box>
<Honkai3rdLayout>
<Head
title={`${t('breadcrumb.honkai-3rd')}: ${t(
'breadcrumb.versions'
@@ -54,8 +54,6 @@ const VersionIndexPage = ({
description={t('versions.list-page-description')}
/>
<Honkai3rdNavigator />
<Box p={3}>
<Breadcrumb
items={[
@@ -243,7 +241,7 @@ const VersionIndexPage = ({
})}
</Box>
</Box>
</Box>
</Honkai3rdLayout>
)
}
src/pages/honkai3rd/weapons/[weaponId].tsx
+3 -4
View File
@@ -3,7 +3,6 @@ import { Box, Card, Heading, Paragraph } from '@theme-ui/components'
import { NextPageContext } from 'next'
import SquareImageBox from '../../../components/atoms/SquareImageBox'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
import { WeaponData } from '../../../lib/honkai3rd/weapons'
import { generateI18NPaths, getI18NProps } from '../../../server/i18n'
import {
@@ -15,6 +14,7 @@ import { useTranslation, translate } from '../../../lib/i18n'
import Head from '../../../components/atoms/Head'
import PageLink from '../../../components/atoms/PageLink'
import { assetsBucketBaseUrl } from '../../../lib/consts'
import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
interface WeaponShowPageProps {
weapon: WeaponData
@@ -28,7 +28,7 @@ const WeaponShowPage = ({ weapon }: WeaponShowPageProps) => {
const weaponCategory = t(`weapons-show.${weapon.category}`)
return (
<Box>
<Honkai3rdLayout>
<Head
title={`${t('breadcrumb.honkai-3rd')}: ${weaponName} - ${t(
'nav.abyss-lab'
@@ -39,7 +39,6 @@ const WeaponShowPage = ({ weapon }: WeaponShowPageProps) => {
weapon.atk
} / CRT : ${weapon.crt}`}
/>
<Honkai3rdNavigator />
<Box p={3}>
<Breadcrumb
@@ -106,7 +105,7 @@ const WeaponShowPage = ({ weapon }: WeaponShowPageProps) => {
})}
</Box>
</Box>
</Box>
</Honkai3rdLayout>
)
}
src/pages/honkai3rd/weapons/index.tsx
+41 -40
View File
@@ -1,7 +1,6 @@
/** @jsxImportSource theme-ui */
import { Box, Heading, Flex } from '@theme-ui/components'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
import { listWeapons } from '../../../server/data/honkai3rd/weapons'
import { pick } from 'ramda'
import { useMemo } from 'react'
@@ -13,6 +12,7 @@ import { getI18NProps } from '../../../server/i18n'
import { NextPageContext } from 'next'
import { useTranslation, translate } from '../../../lib/i18n'
import Head from '../../../components/atoms/Head'
import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
type WeaponListItemData = Pick<
WeaponData,
@@ -57,50 +57,51 @@ const WeaponListPage = ({ weaponDataList }: WeaponListPageProps) => {
}, [weaponDataList, filter])
return (
<Box>
<Head
title={`${t('breadcrumb.honkai-3rd')}: ${t('breadcrumb.weapons')} - ${t(
'nav.abyss-lab'
)}`}
description={t('weapons-list.description')}
/>
<Honkai3rdNavigator />
<Box p={3}>
<Breadcrumb
items={[
{ href: '/honkai3rd', label: t('breadcrumb.honkai-3rd') },
{ href: '/honkai3rd/weapons', label: t('breadcrumb.weapons') },
]}
<Honkai3rdLayout>
<Box>
<Head
title={`${t('breadcrumb.honkai-3rd')}: ${t(
'breadcrumb.weapons'
)} - ${t('nav.abyss-lab')}`}
description={t('weapons-list.description')}
/>
<Heading as='h1'>{t('weapons-list.weapons')}</Heading>
<Box>
<Heading as='h3'>{t('weapons-list.filter-by-category')}</Heading>
<Flex mb={2} sx={{ flexWrap: 'wrap' }}>
{weaponFilterOptions.map(({ value, label, krLabel }) => {
return (
<FilterButton
key={value}
active={value === filter}
value={value}
label={translate(locale, { 'ko-KR': krLabel }, label)}
m={1}
/>
)
})}
<Box p={3}>
<Breadcrumb
items={[
{ href: '/honkai3rd', label: t('breadcrumb.honkai-3rd') },
{ href: '/honkai3rd/weapons', label: t('breadcrumb.weapons') },
]}
/>
<Heading as='h1'>{t('weapons-list.weapons')}</Heading>
<Box>
<Heading as='h3'>{t('weapons-list.filter-by-category')}</Heading>
<Flex mb={2} sx={{ flexWrap: 'wrap' }}>
{weaponFilterOptions.map(({ value, label, krLabel }) => {
return (
<FilterButton
key={value}
active={value === filter}
value={value}
label={translate(locale, { 'ko-KR': krLabel }, label)}
m={1}
/>
)
})}
</Flex>
</Box>
<Flex
sx={{
flexWrap: 'wrap',
justifyContent: 'space-around',
}}
>
{weaponList}
</Flex>
</Box>
<Flex
sx={{
flexWrap: 'wrap',
justifyContent: 'space-around',
}}
>
{weaponList}
</Flex>
</Box>
</Box>
</Honkai3rdLayout>
)
}
src/pages/index.tsx
+2 -1
View File
@@ -3,6 +3,7 @@ import { Box, Text, Image } from '@theme-ui/components'
import PageLink from '../components/atoms/PageLink'
import RootNavigator from '../components/organisms/RootNavigator'
import Head from '../components/atoms/Head'
import { assetsBucketBaseUrl } from '../lib/consts'
const IndexPage = () => {
return (
@@ -15,7 +16,7 @@ const IndexPage = () => {
<Box sx={{ position: 'relative' }}>
<Image
alt='Honkai 3rd Wallpaper'
src='/assets/honkai3rd/wallpaper.png'
src={`${assetsBucketBaseUrl}/assets/honkai3rd/wallpaper.png`}
width={640}
height={360}
/>
src/styles/nextjs.css
+7
View File
@@ -0,0 +1,7 @@
body {
height: 100vh;
}
#__next {
height: 100%;
}
public/assets/nprogress.css → src/styles/nprogress.css
View File