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