Add breadcrumbs

This commit is contained in:
Sakura Knoll
2023-07-15 01:36:12 +09:00 Unverified
parent b4eb338ea0
commit 308056eac5
15 changed files with 221 additions and 152 deletions
@@ -156,11 +156,11 @@ function getHref(target: NavItemTarget) {
case 'battlesuits': case 'battlesuits':
case 'weapons': case 'weapons':
case 'elfs': case 'elfs':
return `/honkai3rd/v2/${target}` return `/honkai3rd/${target}`
case 'stigmata': case 'stigmata':
return '/honkai3rd/v2/stigmata-sets' return '/honkai3rd/stigmata-sets'
case 'elysian-realm': case 'elysian-realm':
return '/honkai3rd/v2/er' return '/honkai3rd/er'
} }
return `/honkai3rd/${target}` return `/honkai3rd/${target}`
} }
+2 -2
View File
@@ -29,7 +29,7 @@ const BattlesuitListPage = ({ battlesuitCatalog }: BattlesuitListPageProps) => {
items={[ items={[
{ href: '/honkai3rd', label: t('common.honkai-3rd') }, { href: '/honkai3rd', label: t('common.honkai-3rd') },
{ {
href: '/honkai3rd/v2/battlesuits', href: '/honkai3rd/battlesuits',
label: t('common.battlesuits') label: t('common.battlesuits')
} }
]} ]}
@@ -39,7 +39,7 @@ const BattlesuitListPage = ({ battlesuitCatalog }: BattlesuitListPageProps) => {
{battlesuitCatalog.map(battlesuit => { {battlesuitCatalog.map(battlesuit => {
return ( return (
<Box key={battlesuit.id}> <Box key={battlesuit.id}>
<Link href={`/honkai3rd/v2/battlesuits/${battlesuit.id}`}> <Link href={`/honkai3rd/battlesuits/${battlesuit.id}`}>
<BattlesuitCatalogItemCard battlesuit={battlesuit} /> <BattlesuitCatalogItemCard battlesuit={battlesuit} />
</Link> </Link>
</Box> </Box>
+93 -61
View File
@@ -9,12 +9,19 @@ import { assetsBucketBaseUrl } from '../../../lib/consts'
import { ListMap } from '../../../lib/utils' import { ListMap } from '../../../lib/utils'
import FormattedText from '../../../components/v2/FormattedText' import FormattedText from '../../../components/v2/FormattedText'
import { formatSubSkillInfo } from '../../../lib/v2/data/formatText' import { formatSubSkillInfo } from '../../../lib/v2/data/formatText'
import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
import Head from '../../../components/atoms/Head'
import { useTranslation } from 'next-i18next'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import { getI18NProps } from '../../../server/i18n'
interface ElfShowPageProps { interface ElfShowPageProps {
elf: Elf elf: Elf
} }
const ElfShowPage = ({ elf }: ElfShowPageProps) => { const ElfShowPage = ({ elf }: ElfShowPageProps) => {
const { t } = useTranslation()
const skillRows = useMemo(() => { const skillRows = useMemo(() => {
const rowSkillListMap = elf.skills.reduce<ListMap<string, ElfSkill>>((map, skill) => { const rowSkillListMap = elf.skills.reduce<ListMap<string, ElfSkill>>((map, skill) => {
map.set(skill.row.toString(), skill) map.set(skill.row.toString(), skill)
@@ -23,73 +30,98 @@ const ElfShowPage = ({ elf }: ElfShowPageProps) => {
return [...rowSkillListMap.values()] return [...rowSkillListMap.values()]
}, [elf.skills]) }, [elf.skills])
return ( return (
<Box> <Honkai3rdLayout>
<Heading as="h1">{elf.fullName}</Heading> <Head
<SquareImage title={`${elf.fullName} - ${t('common.elfs')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
src={`${assetsBucketBaseUrl}/raw/elfcardfigures/${elf.figureImage}.png`} description={t('weapons-list.description')}
originalSize={720} canonicalHref={`/honkai3rd/elfs/${elf.id}`}
size={480}
/> />
<Box p={2}>
<Breadcrumb
items={[
{ href: '/honkai3rd', label: t('common.honkai-3rd') },
{
href: {
pathname: `/honkai3rd/elfs`
},
label: t('common.elfs')
},
{
href: `/honkai3rd/elfs/${elf.id}`,
label: elf.fullName
}
]}
/>
<Card mb={3}> <Heading as="h1">{elf.fullName}</Heading>
<Box sx={{ p: 1, borderBottom: 'default' }}>
<Flex>
{elf.tags.map(tag => {
return (
<Box key={tag.type} mr={1}>
<TagIcon type={tag.type} />
</Box>
)
})}
</Flex>
</Box>
<Box p={1}>
Ult CD: {elf.ultSkillCd} / Ult SP Cost: {elf.ultSkillCost}
</Box>
</Card>
<Heading as="h2">Skills</Heading> <SquareImage
src={`${assetsBucketBaseUrl}/raw/elfcardfigures/${elf.figureImage}.png`}
originalSize={720}
size={480}
/>
{skillRows.map((row, index) => { <Card mb={3}>
return ( <Box sx={{ p: 1, borderBottom: 'default' }}>
<Card key={index} mb={2}> <Flex>
{row.map(skill => { {elf.tags.map(tag => {
return ( return (
<Box <Box key={tag.type} mr={1}>
key={skill.id} <TagIcon type={tag.type} />
sx={{
borderBottom: 'default',
'&:last-child': {
borderBottom: 'none'
}
}}
>
<Box sx={{ borderBottom: 'default', p: 1 }}>
<Flex sx={{ alignItems: 'center' }}>
<Box sx={{ flexShrink: 0 }}>
<SquareImage
src={`${assetsBucketBaseUrl}/raw/elf_skill_icon/${skill.icon}.png`}
originalSize={40}
/>
</Box>
<Heading as={'h3'} sx={{ my: 0, ml: 1 }}>
<FormattedText>{skill.name}</FormattedText>
</Heading>
{/* {skill.id} */}
<Box sx={{ color: 'textMuted', ml: 1 }}>({skill.skillType})</Box>
</Flex>
</Box> </Box>
<Box sx={{ p: 1 }}> )
<FormattedText>{formatSubSkillInfo(skill)}</FormattedText> })}
</Flex>
</Box>
<Box p={1}>
Ult CD: {elf.ultSkillCd} / Ult SP Cost: {elf.ultSkillCost}
</Box>
</Card>
<Heading as="h2">Skills</Heading>
{skillRows.map((row, index) => {
return (
<Card key={index} mb={2}>
{row.map(skill => {
return (
<Box
key={skill.id}
sx={{
borderBottom: 'default',
'&:last-child': {
borderBottom: 'none'
}
}}
>
<Box sx={{ borderBottom: 'default', p: 1 }}>
<Flex sx={{ alignItems: 'center' }}>
<Box sx={{ flexShrink: 0 }}>
<SquareImage
src={`${assetsBucketBaseUrl}/raw/elf_skill_icon/${skill.icon}.png`}
originalSize={40}
/>
</Box>
<Heading as={'h3'} sx={{ my: 0, ml: 1 }}>
<FormattedText>{skill.name}</FormattedText>
</Heading>
{/* {skill.id} */}
<Box sx={{ color: 'textMuted', ml: 1 }}>({skill.skillType})</Box>
</Flex>
</Box>
<Box sx={{ p: 1 }}>
<FormattedText>{formatSubSkillInfo(skill)}</FormattedText>
</Box>
</Box> </Box>
</Box> )
) })}
})} </Card>
</Card> )
) })}
})} </Box>
</Box> </Honkai3rdLayout>
) )
} }
@@ -99,7 +131,7 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
const elf = loadElfData(params.elfId) const elf = loadElfData(params.elfId)
return { return {
props: { elf } props: { elf, ...(await getI18NProps(locale)) }
} }
} }
+57 -36
View File
@@ -1,52 +1,73 @@
/** @jsxImportSource theme-ui */ /** @jsxImportSource theme-ui */
import { Box, Card } from '@theme-ui/components' import { Box, Card, Heading } from '@theme-ui/components'
import { NextPageContext } from 'next' import { NextPageContext } from 'next'
import { Flex, Link } from 'theme-ui' import { Flex, Link } from 'theme-ui'
import { ElfCatalogItem } from '../../../lib/v2/data/types' import { ElfCatalogItem } from '../../../lib/v2/data/types'
import { loadElfCatalog } from '../../../lib/v2/server/loadData' import { loadElfCatalog } from '../../../lib/v2/server/loadData'
import RarityBar from '../../../components/v2/RarityBar' import RarityBar from '../../../components/v2/RarityBar'
import ElfIcon from '../../../components/v2/ElfIcon' import ElfIcon from '../../../components/v2/ElfIcon'
import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
import Head from '../../../components/atoms/Head'
import { useTranslation } from 'next-i18next'
import { getI18NProps } from '../../../server/i18n'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
interface ElfListPageProps { interface ElfListPageProps {
elfs: ElfCatalogItem[] elfs: ElfCatalogItem[]
} }
const ElfListPage = ({ elfs }: ElfListPageProps) => { const ElfListPage = ({ elfs }: ElfListPageProps) => {
return ( const { t } = useTranslation()
<Box>
<h1>Elfs</h1>
<Flex sx={{ flexWrap: 'wrap' }}>
{elfs
.sort((a, b) => {
const aId = getId(a.id)
const bId = getId(b.id)
return bId - aId
function getId(id: string): number { return (
return parseInt(id) <Honkai3rdLayout>
} <Head
}) title={`${t('common.elfs')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
.map(elf => { description={t('weapons-list.description')}
return ( canonicalHref={`/honkai3rd/elfs`}
<Box key={elf.id} m={2}> />
<Link href={`/v2-pre/elfs/${elf.id}`}>
<Card p={1}> <Box p={2}>
<Box> <Breadcrumb
<ElfIcon icon={elf.cardIcon} /> items={[
<RarityBar rarity={elf.rarity} /> { href: '/honkai3rd', label: t('common.honkai-3rd') },
</Box> { href: '/honkai3rd/elfs', label: t('common.elfs') }
<Box ]}
sx={{ textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} />
> <Heading as="h1">Elfs</Heading>
{elf.fullName} <Flex sx={{ flexWrap: 'wrap' }}>
</Box> {elfs
</Card> .sort((a, b) => {
</Link> const aId = getId(a.id)
</Box> const bId = getId(b.id)
) return bId - aId
})}
</Flex> function getId(id: string): number {
</Box> return parseInt(id)
}
})
.map(elf => {
return (
<Box key={elf.id} m={2}>
<Link href={`/honkai3rd/elfs/${elf.id}`}>
<Card p={1}>
<Box>
<ElfIcon icon={elf.cardIcon} />
<RarityBar rarity={elf.rarity} />
</Box>
<Box
sx={{ textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
>
{elf.fullName}
</Box>
</Card>
</Link>
</Box>
)
})}
</Flex>
</Box>
</Honkai3rdLayout>
) )
} }
@@ -56,6 +77,6 @@ export async function getStaticProps({ locale }: NextPageContext) {
const elfs = loadElfCatalog() const elfs = loadElfCatalog()
return { return {
props: { elfs } props: { elfs, ...(await getI18NProps(locale)) }
} }
} }
@@ -50,7 +50,7 @@ const BattlesuitShowPage = ({ battlesuit, erBattlesuit }: BattlesuitShowPageProp
'common.abyss-lab' 'common.abyss-lab'
)}`} )}`}
description={`${t('common.honkai-3rd')} ${t('common.elysian-realm')} ${t('battlesuit-show.battlesuit')}`} description={`${t('common.honkai-3rd')} ${t('common.elysian-realm')} ${t('battlesuit-show.battlesuit')}`}
canonicalHref={`/honkai3rd/v2/er/battlesuits/${battlesuit.id}`} canonicalHref={`/honkai3rd/er/battlesuits/${battlesuit.id}`}
/> />
<Box p={2}> <Box p={2}>
@@ -58,11 +58,11 @@ const BattlesuitShowPage = ({ battlesuit, erBattlesuit }: BattlesuitShowPageProp
items={[ items={[
{ href: '/honkai3rd', label: t('common.honkai-3rd') }, { href: '/honkai3rd', label: t('common.honkai-3rd') },
{ {
href: '/honkai3rd/v2/er', href: '/honkai3rd/er',
label: t('common.elysian-realm') label: t('common.elysian-realm')
}, },
{ {
href: `/honkai3rd/v2/er/battlesuits/${battlesuit.id}`, href: `/honkai3rd/er/battlesuits/${battlesuit.id}`,
label: battlesuit.fullName label: battlesuit.fullName
} }
]} ]}
+11 -10
View File
@@ -1,5 +1,5 @@
/** @jsxImportSource theme-ui */ /** @jsxImportSource theme-ui */
import { Box, Heading, Flex, Link, Card } from '@theme-ui/components' import { Box, Heading, Flex, Card } from '@theme-ui/components'
import { NextPageContext } from 'next' import { NextPageContext } from 'next'
import { import {
loadBattlesuitCatalog, loadBattlesuitCatalog,
@@ -20,6 +20,7 @@ import Head from '../../../components/atoms/Head'
import Breadcrumb from '../../../components/organisms/Breadcrumb' import Breadcrumb from '../../../components/organisms/Breadcrumb'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
import { getI18NProps } from '../../../server/i18n' import { getI18NProps } from '../../../server/i18n'
import PageLink from '../../../components/atoms/PageLink'
interface ErPageProps { interface ErPageProps {
erBattlesuitCatalog: ErBattlesuitCatalogItem[] erBattlesuitCatalog: ErBattlesuitCatalogItem[]
@@ -51,7 +52,7 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
items={[ items={[
{ href: '/honkai3rd', label: t('common.honkai-3rd') }, { href: '/honkai3rd', label: t('common.honkai-3rd') },
{ {
href: '/honkai3rd/v2/er', href: '/honkai3rd/er',
label: t('common.elysian-realm') label: t('common.elysian-realm')
} }
]} ]}
@@ -62,7 +63,7 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
<Flex sx={{ flexWrap: 'wrap', mb: 3 }}> <Flex sx={{ flexWrap: 'wrap', mb: 3 }}>
{signetGroups.map(signetGroup => { {signetGroups.map(signetGroup => {
return ( return (
<Link href={`/honkai3rd/v2/er/signets/${signetGroup.id}`} key={signetGroup.id}> <PageLink href={`/honkai3rd/er/signets/${signetGroup.id}`} key={signetGroup.id}>
<Card p={1} m={1}> <Card p={1} m={1}>
<Flex sx={{ alignItems: 'center' }}> <Flex sx={{ alignItems: 'center' }}>
<SquareImage <SquareImage
@@ -73,7 +74,7 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
<Box p={1}>{signetGroup.name}</Box> <Box p={1}>{signetGroup.name}</Box>
</Flex> </Flex>
</Card> </Card>
</Link> </PageLink>
) )
})} })}
</Flex> </Flex>
@@ -84,9 +85,9 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
const battlesuit = battlesuitCatalogMap.get(erBattlesuit.battlesuit)! const battlesuit = battlesuitCatalogMap.get(erBattlesuit.battlesuit)!
return ( return (
<Box key={battlesuit.id}> <Box key={battlesuit.id}>
<Link href={`/honkai3rd/v2/er/battlesuits/${battlesuit.id}`}> <PageLink href={`/honkai3rd/er/battlesuits/${battlesuit.id}`}>
<BattlesuitCatalogItemCard battlesuit={battlesuit} /> <BattlesuitCatalogItemCard battlesuit={battlesuit} />
</Link> </PageLink>
</Box> </Box>
) )
})} })}
@@ -99,7 +100,7 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
const battlesuit = battlesuitCatalogMap.get(support)! const battlesuit = battlesuitCatalogMap.get(support)!
return ( return (
<Box key={support}> <Box key={support}>
<Link href={`/honkai3rd/v2/er/supports#${support}`}> <PageLink href={`/honkai3rd/er/supports#${support}`}>
<Box sx={{ p: 1, m: 1, width: 110 }}> <Box sx={{ p: 1, m: 1, width: 110 }}>
<BattlesuitSmallIcon battlesuit={battlesuit} ratio={0.8} /> <BattlesuitSmallIcon battlesuit={battlesuit} ratio={0.8} />
<Box <Box
@@ -109,7 +110,7 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
</Box> </Box>
</Box> </Box>
{/* <BattlesuitCatalogItemCard battlesuit={battlesuit} /> */} {/* <BattlesuitCatalogItemCard battlesuit={battlesuit} /> */}
</Link> </PageLink>
</Box> </Box>
) )
})} })}
@@ -121,9 +122,9 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
{erSigils.map(sigil => { {erSigils.map(sigil => {
return ( return (
<Card key={sigil.id} p={1} m={1}> <Card key={sigil.id} p={1} m={1}>
<Link href={`/honkai3rd/v2/er/sigils#${sigil.id}`}> <PageLink href={`/honkai3rd/er/sigils#${sigil.id}`}>
<MaterialIcon materialId={sigil.id} /> <MaterialIcon materialId={sigil.id} />
</Link> </PageLink>
</Card> </Card>
) )
})} })}
+3 -3
View File
@@ -23,7 +23,7 @@ const SigilsPage = ({ erSigils }: SigilsPageProps) => {
'common.honkai-3rd' 'common.honkai-3rd'
)} - ${t('common.abyss-lab')}`} )} - ${t('common.abyss-lab')}`}
description={`${t('common.elysian-realm')} ${t('elysian-realm.supports')}`} description={`${t('common.elysian-realm')} ${t('elysian-realm.supports')}`}
canonicalHref={`/honkai3rd/v2/er/sigils`} canonicalHref={`/honkai3rd/er/sigils`}
/> />
<Box p={2}> <Box p={2}>
@@ -31,11 +31,11 @@ const SigilsPage = ({ erSigils }: SigilsPageProps) => {
items={[ items={[
{ href: '/honkai3rd', label: t('common.honkai-3rd') }, { href: '/honkai3rd', label: t('common.honkai-3rd') },
{ {
href: '/honkai3rd/v2/er', href: '/honkai3rd/er',
label: t('common.elysian-realm') label: t('common.elysian-realm')
}, },
{ {
href: '/honkai3rd/v2/er/sigils', href: '/honkai3rd/er/sigils',
label: t('elysian-realm.remembrance-sigil') label: t('elysian-realm.remembrance-sigil')
} }
]} ]}
+2 -2
View File
@@ -51,11 +51,11 @@ const BattlesuitShowPage = ({ signets, group }: BattlesuitShowPageProps) => {
items={[ items={[
{ href: '/honkai3rd', label: t('common.honkai-3rd') }, { href: '/honkai3rd', label: t('common.honkai-3rd') },
{ {
href: '/honkai3rd/v2/er', href: '/honkai3rd/er',
label: t('common.elysian-realm') label: t('common.elysian-realm')
}, },
{ {
href: `/honkai3rd/v2/er/signets/${group.id}`, href: `/honkai3rd/er/signets/${group.id}`,
label: group.name label: group.name
} }
]} ]}
+2 -2
View File
@@ -43,11 +43,11 @@ const SupportsPage = ({
items={[ items={[
{ href: '/honkai3rd', label: t('common.honkai-3rd') }, { href: '/honkai3rd', label: t('common.honkai-3rd') },
{ {
href: '/honkai3rd/v2/er', href: '/honkai3rd/er',
label: t('common.elysian-realm') label: t('common.elysian-realm')
}, },
{ {
href: '/honkai3rd/v2/er/supports', href: '/honkai3rd/er/supports',
label: t('elysian-realm.supports') label: t('elysian-realm.supports')
} }
]} ]}
@@ -1,5 +1,5 @@
import { NextPageContext } from 'next' import { NextPageContext } from 'next'
import { Box, Card, Flex, Heading, Link } from 'theme-ui' import { Box, Card, Flex, Heading } from 'theme-ui'
import FormattedText from '../../../components/v2/FormattedText' import FormattedText from '../../../components/v2/FormattedText'
import { formatSubSkillInfo } from '../../../lib/v2/data/formatText' import { formatSubSkillInfo } from '../../../lib/v2/data/formatText'
import { loadStigmaData, loadStigmataSetCatalog, loadStigmataSetData } from '../../../lib/v2/server/loadData' import { loadStigmaData, loadStigmataSetCatalog, loadStigmataSetData } from '../../../lib/v2/server/loadData'
@@ -12,6 +12,7 @@ import Head from '../../../components/atoms/Head'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
import { getI18NProps } from '../../../server/i18n' import { getI18NProps } from '../../../server/i18n'
import Breadcrumb from '../../../components/organisms/Breadcrumb' import Breadcrumb from '../../../components/organisms/Breadcrumb'
import PageLink from '../../../components/atoms/PageLink'
interface StigmataSetShowPage { interface StigmataSetShowPage {
stigmataSet: StigmataSet stigmataSet: StigmataSet
@@ -30,7 +31,7 @@ const StigmataSetShowPage = ({ stigmataSet, stigmata }: StigmataSetShowPage) =>
description={`${t('common.honkai-3rd')} ${t('stigmata-show.stigmata-set')} / ${'⭐'.repeat(rarity)} / ${ description={`${t('common.honkai-3rd')} ${t('stigmata-show.stigmata-set')} / ${'⭐'.repeat(rarity)} / ${
stigmataSet.name stigmataSet.name
}`} }`}
canonicalHref={`/honkai3rd/v2/stigmata-sets/${stigmataSet.id}-set`} canonicalHref={`/honkai3rd/stigmata-sets/${stigmataSet.id}-set`}
/> />
<Box p={2}> <Box p={2}>
@@ -39,12 +40,12 @@ const StigmataSetShowPage = ({ stigmataSet, stigmata }: StigmataSetShowPage) =>
{ href: '/honkai3rd', label: t('common.honkai-3rd') }, { href: '/honkai3rd', label: t('common.honkai-3rd') },
{ {
href: { href: {
pathname: `/honkai3rd/v2/stigmata-sets` pathname: `/honkai3rd/stigmata-sets`
}, },
label: t('common.stigmata-set') label: t('common.stigmata-set')
}, },
{ {
href: `/honkai3rd/v2/stigmata-sets/${stigmataSet.id}-set`, href: `/honkai3rd/stigmata-sets/${stigmataSet.id}`,
label: stigmataSet.name label: stigmataSet.name
} }
]} ]}
@@ -68,7 +69,7 @@ const StigmataSetShowPage = ({ stigmataSet, stigmata }: StigmataSetShowPage) =>
my: 1 my: 1
}} }}
> >
<Link href={`/honkai3rd/v2/stigmata/${rootStigma.id}`}>{stigma.name}</Link> <PageLink href={`/honkai3rd/stigmata/${rootStigma.id}`}>{stigma.name}</PageLink>
</Heading> </Heading>
</Flex> </Flex>
+7 -7
View File
@@ -1,8 +1,7 @@
/** @jsxImportSource theme-ui */ /** @jsxImportSource theme-ui */
import { Box, Card, Heading } from '@theme-ui/components' import { Box, Card, Heading } from '@theme-ui/components'
import { NextPageContext } from 'next' import { NextPageContext } from 'next'
import { Flex, Link } from 'theme-ui' import { Flex } from 'theme-ui'
import { StigmataSetCatalogItem } from '../../../lib/v2/data/types' import { StigmataSetCatalogItem } from '../../../lib/v2/data/types'
import { loadStigmataSetCatalog } from '../../../lib/v2/server/loadData' import { loadStigmataSetCatalog } from '../../../lib/v2/server/loadData'
import StigmaIcon from '../../../components/v2/StigmaIcon' import StigmaIcon from '../../../components/v2/StigmaIcon'
@@ -11,6 +10,7 @@ import Head from '../../../components/atoms/Head'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
import { getI18NProps } from '../../../server/i18n' import { getI18NProps } from '../../../server/i18n'
import Breadcrumb from '../../../components/organisms/Breadcrumb' import Breadcrumb from '../../../components/organisms/Breadcrumb'
import PageLink from '../../../components/atoms/PageLink'
interface StigmataSetListPageProps { interface StigmataSetListPageProps {
stigmataSetCatalog: StigmataSetCatalogItem[] stigmataSetCatalog: StigmataSetCatalogItem[]
@@ -23,19 +23,19 @@ const StigmataSetListPage = ({ stigmataSetCatalog }: StigmataSetListPageProps) =
<Head <Head
title={`${t('common.stigmata')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`} title={`${t('common.stigmata')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
description={t('stigmata-set-list.description')} description={t('stigmata-set-list.description')}
canonicalHref={`/honkai3rd/v2/stigmata`} canonicalHref={`/honkai3rd/stigmata`}
/> />
<Box p={2}> <Box p={2}>
<Breadcrumb <Breadcrumb
items={[ items={[
{ href: '/honkai3rd', label: t('common.honkai-3rd') }, { href: '/honkai3rd', label: t('common.honkai-3rd') },
{ href: '/honkai3rd/v2/stigmata-sets', label: t('common.stigmata-set') } { href: '/honkai3rd/stigmata-sets', label: t('common.stigmata-set') }
]} ]}
/> />
<Heading as="h1">{t('stigmata-set-list.stigmata-set')}</Heading> <Heading as="h1">{t('stigmata-set-list.stigmata-set')}</Heading>
<Box mb={3}> <Box mb={3}>
<Link href="/honkai3rd/v2/stigmata">{t('stigmata-set-list.show-signle-list')}</Link> <PageLink href="/honkai3rd/stigmata">{t('stigmata-set-list.show-signle-list')}</PageLink>
</Box> </Box>
<Flex sx={{ flexWrap: 'wrap' }}> <Flex sx={{ flexWrap: 'wrap' }}>
@@ -61,7 +61,7 @@ const StigmataSetListPage = ({ stigmataSetCatalog }: StigmataSetListPageProps) =
.map(stigmataSet => { .map(stigmataSet => {
return ( return (
<Box key={stigmataSet.id} m={1}> <Box key={stigmataSet.id} m={1}>
<Link href={`/honkai3rd/v2/stigmata-sets/${stigmataSet.id}`}> <PageLink href={`/honkai3rd/stigmata-sets/${stigmataSet.id}`}>
<Card p={1}> <Card p={1}>
<Flex sx={{ justifyContent: 'center' }}> <Flex sx={{ justifyContent: 'center' }}>
{stigmataSet.stigmataList.map(stigma => { {stigmataSet.stigmataList.map(stigma => {
@@ -81,7 +81,7 @@ const StigmataSetListPage = ({ stigmataSetCatalog }: StigmataSetListPageProps) =
</Box> </Box>
{/* {stigma.id} */} {/* {stigma.id} */}
</Card> </Card>
</Link> </PageLink>
</Box> </Box>
) )
})} })}
+6 -5
View File
@@ -1,5 +1,5 @@
import { NextPageContext } from 'next' import { NextPageContext } from 'next'
import { Box, Card, Flex, Heading, Link } from 'theme-ui' import { Box, Card, Flex, Heading } from 'theme-ui'
import FormattedText from '../../../components/v2/FormattedText' import FormattedText from '../../../components/v2/FormattedText'
import { formatSubSkillInfo, replaceNewLine } from '../../../lib/v2/data/formatText' import { formatSubSkillInfo, replaceNewLine } from '../../../lib/v2/data/formatText'
import { loadStigmaData, loadStigmataCatalog, loadStigmataSetData } from '../../../lib/v2/server/loadData' import { loadStigmaData, loadStigmataCatalog, loadStigmataSetData } from '../../../lib/v2/server/loadData'
@@ -14,6 +14,7 @@ import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
import Head from '../../../components/atoms/Head' import Head from '../../../components/atoms/Head'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
import Breadcrumb from '../../../components/organisms/Breadcrumb' import Breadcrumb from '../../../components/organisms/Breadcrumb'
import PageLink from '../../../components/atoms/PageLink'
interface StigmaShowPageProps { interface StigmaShowPageProps {
rootStigma: RootStigma rootStigma: RootStigma
@@ -44,9 +45,9 @@ const StigmaShowPage = ({ rootStigma, stigmataSetCatalogItem }: StigmaShowPagePr
<Breadcrumb <Breadcrumb
items={[ items={[
{ href: '/honkai3rd', label: t('common.honkai-3rd') }, { href: '/honkai3rd', label: t('common.honkai-3rd') },
{ href: '/honkai3rd/v2/stigmata', label: t('common.stigmata') }, { href: '/honkai3rd/stigmata', label: t('common.stigmata') },
{ {
href: `/honkai3rd/v2/stigmata/${stigma.id}`, href: `/honkai3rd/stigmata/${stigma.id}`,
label: stigma.name label: stigma.name
} }
]} ]}
@@ -123,7 +124,7 @@ const StigmaShowPage = ({ rootStigma, stigmataSetCatalogItem }: StigmaShowPagePr
<> <>
<Heading as="h2">Set</Heading> <Heading as="h2">Set</Heading>
<Flex key={stigmataSetCatalogItem.id}> <Flex key={stigmataSetCatalogItem.id}>
<Link href={`/v2-pre/stigmata-sets/${stigmataSetCatalogItem.id}`}> <PageLink href={`/honkai3rd/stigmata-sets/${stigmataSetCatalogItem.id}`}>
<Card p={1}> <Card p={1}>
<Flex sx={{ justifyContent: 'center' }}> <Flex sx={{ justifyContent: 'center' }}>
{stigmataSetCatalogItem.stigmataList.map(stigma => { {stigmataSetCatalogItem.stigmataList.map(stigma => {
@@ -143,7 +144,7 @@ const StigmaShowPage = ({ rootStigma, stigmataSetCatalogItem }: StigmaShowPagePr
</Box> </Box>
{/* {stigma.id} */} {/* {stigma.id} */}
</Card> </Card>
</Link> </PageLink>
</Flex> </Flex>
</> </>
)} )}
+17 -5
View File
@@ -1,24 +1,36 @@
/** @jsxImportSource theme-ui */ /** @jsxImportSource theme-ui */
import { Box, Card, Heading } from '@theme-ui/components' import { Box, Card, Heading } from '@theme-ui/components'
import { NextPageContext } from 'next' import { NextPageContext } from 'next'
import { Flex, Link } from 'theme-ui' import { Flex } from 'theme-ui'
import { StigmataCatalogItem } from '../../../lib/v2/data/types' import { StigmataCatalogItem } from '../../../lib/v2/data/types'
import { loadStigmataCatalog } from '../../../lib/v2/server/loadData' import { loadStigmataCatalog } from '../../../lib/v2/server/loadData'
import StigmaIcon from '../../../components/v2/StigmaIcon' import StigmaIcon from '../../../components/v2/StigmaIcon'
import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout' import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
import { getI18NProps } from '../../../server/i18n' import { getI18NProps } from '../../../server/i18n'
import { useTranslation } from 'next-i18next'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import PageLink from '../../../components/atoms/PageLink'
interface StigmataListPageProps { interface StigmataListPageProps {
stigmataCatalog: StigmataCatalogItem[] stigmataCatalog: StigmataCatalogItem[]
} }
const StigmataListPage = ({ stigmataCatalog }: StigmataListPageProps) => { const StigmataListPage = ({ stigmataCatalog }: StigmataListPageProps) => {
const { t } = useTranslation()
return ( return (
<Honkai3rdLayout> <Honkai3rdLayout>
<Box> <Box p={2}>
<Breadcrumb
items={[
{ href: '/honkai3rd', label: t('common.honkai-3rd') },
{ href: '/honkai3rd/stigmata', label: t('common.stigmata') }
]}
/>
<Heading as="h1">Stigmata (Single)</Heading> <Heading as="h1">Stigmata (Single)</Heading>
<Box mb={3}>
<PageLink href="/honkai3rd/stigmata-sets">{t('stigmata-list.show-set-list')}</PageLink>
</Box>
<Flex sx={{ flexWrap: 'wrap' }}> <Flex sx={{ flexWrap: 'wrap' }}>
{stigmataCatalog {stigmataCatalog
.filter(filterStigmata) .filter(filterStigmata)
@@ -26,7 +38,7 @@ const StigmataListPage = ({ stigmataCatalog }: StigmataListPageProps) => {
.map(stigma => { .map(stigma => {
return ( return (
<Box key={stigma.id} m={2}> <Box key={stigma.id} m={2}>
<Link href={`/v2-pre/stigmata/${stigma.id}`}> <PageLink href={`/honkai3rd/stigmata/${stigma.id}`}>
<Card p={1}> <Card p={1}>
<Flex sx={{ justifyContent: 'center' }}> <Flex sx={{ justifyContent: 'center' }}>
<StigmaIcon icon={stigma.icon} rarity={stigma.maxRarity} /> <StigmaIcon icon={stigma.icon} rarity={stigma.maxRarity} />
@@ -45,7 +57,7 @@ const StigmataListPage = ({ stigmataCatalog }: StigmataListPageProps) => {
</Box> </Box>
{/* {stigma.id} */} {/* {stigma.id} */}
</Card> </Card>
</Link> </PageLink>
</Box> </Box>
) )
})} })}
+3 -3
View File
@@ -33,14 +33,14 @@ const WeaponShowPage = ({ rootWeapon }: WeaponShowPageProps) => {
description={`${t('common.honkai-3rd')} ${t('weapons-show.weapon')} / ${'⭐'.repeat( description={`${t('common.honkai-3rd')} ${t('weapons-show.weapon')} / ${'⭐'.repeat(
weapon.rarity weapon.rarity
)} / ${weaponTypeLabel} / ATK : ${atk} / CRT : ${crt}`} )} / ${weaponTypeLabel} / ATK : ${atk} / CRT : ${crt}`}
canonicalHref={`/honkai3rd/v2/weapons/${weapon.id}`} canonicalHref={`/honkai3rd/weapons/${weapon.id}`}
/> />
<Box p={2}> <Box p={2}>
<Breadcrumb <Breadcrumb
items={[ items={[
{ href: '/honkai3rd', label: t('common.honkai-3rd') }, { href: '/honkai3rd', label: t('common.honkai-3rd') },
{ href: '/honkai3rd/v2/weapons', label: t('common.weapons') }, { href: '/honkai3rd/weapons', label: t('common.weapons') },
{ href: `/honkai3rd/v2/weapons/${weapon.id}`, label: weapon.name } { href: `/honkai3rd/weapons/${weapon.id}`, label: weapon.name }
]} ]}
/> />
+6 -5
View File
@@ -1,7 +1,7 @@
/** @jsxImportSource theme-ui */ /** @jsxImportSource theme-ui */
import { Box, Card } from '@theme-ui/components' import { Box, Card } from '@theme-ui/components'
import { NextPageContext } from 'next' import { NextPageContext } from 'next'
import { Flex, Heading, Link } from 'theme-ui' import { Flex, Heading } from 'theme-ui'
import { loadWeaponCatalog } from '../../../lib/v2/server/loadData' import { loadWeaponCatalog } from '../../../lib/v2/server/loadData'
import { WeaponCatalogItem } from '../../../lib/v2/data/types' import { WeaponCatalogItem } from '../../../lib/v2/data/types'
import WeaponIcon from '../../../components/v2/WeaponIcon' import WeaponIcon from '../../../components/v2/WeaponIcon'
@@ -10,6 +10,7 @@ import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
import { getI18NProps } from '../../../server/i18n' import { getI18NProps } from '../../../server/i18n'
import Breadcrumb from '../../../components/organisms/Breadcrumb' import Breadcrumb from '../../../components/organisms/Breadcrumb'
import PageLink from '../../../components/atoms/PageLink'
interface WeaponListPageProps { interface WeaponListPageProps {
weaponCatalog: WeaponCatalogItem[] weaponCatalog: WeaponCatalogItem[]
@@ -22,13 +23,13 @@ const WeaponListPage = ({ weaponCatalog }: WeaponListPageProps) => {
<Head <Head
title={`${t('common.weapons')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`} title={`${t('common.weapons')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
description={t('weapons-list.description')} description={t('weapons-list.description')}
canonicalHref={`/honkai3rd/v2/weapons`} canonicalHref={`/honkai3rd/weapons`}
/> />
<Box p={2}> <Box p={2}>
<Breadcrumb <Breadcrumb
items={[ items={[
{ href: '/honkai3rd', label: t('common.honkai-3rd') }, { href: '/honkai3rd', label: t('common.honkai-3rd') },
{ href: '/honkai3rd/v2/weapons', label: t('common.weapons') } { href: '/honkai3rd/weapons', label: t('common.weapons') }
]} ]}
/> />
<Heading as="h1">{t('common.weapons')}</Heading> <Heading as="h1">{t('common.weapons')}</Heading>
@@ -39,7 +40,7 @@ const WeaponListPage = ({ weaponCatalog }: WeaponListPageProps) => {
.map(weapon => { .map(weapon => {
return ( return (
<Box key={weapon.id} m={1}> <Box key={weapon.id} m={1}>
<Link href={`/honkai3rd/v2/weapons/${weapon.id}`}> <PageLink href={`/honkai3rd/weapons/${weapon.id}`}>
<Card p={1}> <Card p={1}>
<Flex sx={{ justifyContent: 'center' }}> <Flex sx={{ justifyContent: 'center' }}>
<WeaponIcon icon={weapon.icon} rarity={weapon.maxRarity} /> <WeaponIcon icon={weapon.icon} rarity={weapon.maxRarity} />
@@ -58,7 +59,7 @@ const WeaponListPage = ({ weaponCatalog }: WeaponListPageProps) => {
</Box> </Box>
{/* {weapon.id} */} {/* {weapon.id} */}
</Card> </Card>
</Link> </PageLink>
</Box> </Box>
) )
})} })}