Restructure layout

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
+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()
@@ -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>
)
}
+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>
)
}
+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>
)
}
+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>
)
}
+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>
)
}
+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>
)
}
+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>
)
}
+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>
)
}
+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>
)
}
+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>
)
}
+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>
)
}
+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}
/>