Hello World!
This commit is contained in:
Sakura Knoll
@@ -0,0 +1,236 @@
|
||||
import { Box, Heading, Paragraph } from '@theme-ui/components'
|
||||
import { NextPageContext } from 'next'
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
import Breadcrumb from '../../../components/organisms/Breadcrumb'
|
||||
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
|
||||
import {
|
||||
BattlesuitData,
|
||||
getBattlesuitById,
|
||||
listBattlesuits,
|
||||
} from '../../../data/honkai3rd/battlesuits'
|
||||
import CharacterBadge from '../../atoms/CharacterBadge'
|
||||
import TypeBadge from '../../atoms/TypeBadge'
|
||||
|
||||
interface BattlesuitShowPageProps {
|
||||
battlesuit: BattlesuitData
|
||||
}
|
||||
|
||||
const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
|
||||
return (
|
||||
<Box>
|
||||
<Honkai3rdNavigator />
|
||||
|
||||
<Box p={3}>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ href: '/honkai3rd', label: 'Honkai 3rd' },
|
||||
{ href: '/honkai3rd/battlesuits', label: 'Battlesuits' },
|
||||
{
|
||||
href: `/honkai3rd/battlesuits/${battlesuit.id}`,
|
||||
label: battlesuit.name,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<Heading as='h1'>{battlesuit.name}</Heading>
|
||||
|
||||
<Box className='mb-4'>
|
||||
<Box>
|
||||
<Box>
|
||||
<CharacterBadge character={battlesuit.valkyrie} />
|
||||
</Box>
|
||||
<Box>
|
||||
<TypeBadge type={battlesuit.type} />
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<img src={`/assets/honkai3rd/battlesuits/${battlesuit.id}.png`} />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box className='mb-2'>
|
||||
<Heading as='h2'>Leader</Heading>
|
||||
<Box variant='flush'>
|
||||
<Box>
|
||||
<Heading as='h3'>{battlesuit.leader.core.name}</Heading>
|
||||
<Paragraph>{battlesuit.leader.core.description}</Paragraph>
|
||||
{battlesuit.leader.subskills.map((subskill, index) => {
|
||||
return (
|
||||
<>
|
||||
<Heading as='h4'>
|
||||
{subskill.name}
|
||||
{subskill.requiredRank != null
|
||||
? ` (${subskill.requiredRank})`
|
||||
: ''}
|
||||
</Heading>
|
||||
<p>{subskill.description}</p>
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box className='mb-2'>
|
||||
<Heading as='h2'>Passive</Heading>
|
||||
<Box variant='flush'>
|
||||
<Box>
|
||||
<Heading as='h3'>{battlesuit.passive.core.name}</Heading>
|
||||
<Paragraph>{battlesuit.passive.core.description}</Paragraph>
|
||||
{battlesuit.passive.subskills.map((subskill, index) => {
|
||||
return (
|
||||
<>
|
||||
<Heading as='h4'>
|
||||
{subskill.name}
|
||||
{subskill.requiredRank != null
|
||||
? ` (${subskill.requiredRank})`
|
||||
: ''}
|
||||
</Heading>
|
||||
<p>{subskill.description}</p>
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box className='mb-2'>
|
||||
<Heading as='h2'>Evasion</Heading>
|
||||
<Box variant='flush'>
|
||||
<Box>
|
||||
<Heading as='h3'>{battlesuit.evasion.core.name}</Heading>
|
||||
<Paragraph>{battlesuit.evasion.core.description}</Paragraph>
|
||||
{battlesuit.evasion.subskills.map((subskill, index) => {
|
||||
return (
|
||||
<>
|
||||
<Heading as='h4'>
|
||||
{subskill.name}
|
||||
{subskill.requiredRank != null
|
||||
? ` (${subskill.requiredRank})`
|
||||
: ''}
|
||||
</Heading>
|
||||
<p>{subskill.description}</p>
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box className='mb-2'>
|
||||
<Heading as='h2'>Special Attack</Heading>
|
||||
<Box variant='flush'>
|
||||
<Box>
|
||||
<Heading as='h3'>{battlesuit.special.core.name}</Heading>
|
||||
<Paragraph>{battlesuit.special.core.description}</Paragraph>
|
||||
{battlesuit.special.subskills.map((subskill, index) => {
|
||||
return (
|
||||
<>
|
||||
<Heading as='h4'>
|
||||
{subskill.name}
|
||||
{subskill.requiredRank != null
|
||||
? ` (${subskill.requiredRank})`
|
||||
: ''}
|
||||
</Heading>
|
||||
<p>{subskill.description}</p>
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box className='mb-2'>
|
||||
<Heading as='h2'>Ultimate</Heading>
|
||||
<Box variant='flush'>
|
||||
<Box>
|
||||
<Heading as='h3'>{battlesuit.ultimate.core.name}</Heading>
|
||||
<Paragraph>{battlesuit.ultimate.core.description}</Paragraph>
|
||||
{battlesuit.ultimate.subskills.map((subskill, index) => {
|
||||
return (
|
||||
<>
|
||||
<Heading as='h4'>
|
||||
{subskill.name}
|
||||
{subskill.requiredRank != null
|
||||
? ` (${subskill.requiredRank})`
|
||||
: ''}
|
||||
</Heading>
|
||||
<p>{subskill.description}</p>
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box className='mb-2'>
|
||||
<Heading as='h2'>Basic Attack</Heading>
|
||||
<Box variant='flush'>
|
||||
<Box>
|
||||
<Heading as='h3'>{battlesuit.basic.core.name}</Heading>
|
||||
<Paragraph>{battlesuit.basic.core.description}</Paragraph>
|
||||
{battlesuit.basic.subskills.map((subskill, index) => {
|
||||
return (
|
||||
<>
|
||||
<Heading as='h4'>
|
||||
{subskill.name}
|
||||
{subskill.requiredRank != null
|
||||
? ` (${subskill.requiredRank})`
|
||||
: ''}
|
||||
</Heading>
|
||||
<p>{subskill.description}</p>
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{battlesuit.sp != null && (
|
||||
<Box className='mb-2'>
|
||||
<Heading as='h2'>SP Skill</Heading>
|
||||
<Box variant='flush'>
|
||||
<Box>
|
||||
<Heading as='h3'>{battlesuit.sp.core.name}</Heading>
|
||||
<Paragraph>{battlesuit.sp.core.description}</Paragraph>
|
||||
{battlesuit.sp.subskills.map((subskill, index) => {
|
||||
return (
|
||||
<>
|
||||
<Heading as='h4'>
|
||||
{subskill.name}
|
||||
{subskill.requiredRank != null
|
||||
? ` (${subskill.requiredRank})`
|
||||
: ''}
|
||||
</Heading>
|
||||
<p>{subskill.description}</p>
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default BattlesuitShowPage
|
||||
|
||||
export function getStaticProps(
|
||||
context: NextPageContext & { params: { battlesuitId: string } }
|
||||
) {
|
||||
const battlesuit = getBattlesuitById(context.params.battlesuitId)
|
||||
return {
|
||||
props: { battlesuit },
|
||||
}
|
||||
}
|
||||
|
||||
export async function getStaticPaths() {
|
||||
return {
|
||||
paths: listBattlesuits().map((battlesuit) => {
|
||||
return {
|
||||
params: { battlesuitId: battlesuit.id },
|
||||
}
|
||||
}),
|
||||
fallback: true,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
import { Box, Heading, Flex, Text, Link } from '@theme-ui/components'
|
||||
import NextLink from 'next/link'
|
||||
import React from 'react'
|
||||
import Breadcrumb from '../../../components/organisms/Breadcrumb'
|
||||
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
|
||||
import {
|
||||
BattlesuitData,
|
||||
listBattlesuits,
|
||||
} from '../../../data/honkai3rd/battlesuits'
|
||||
|
||||
interface BattlesuitListPageProps {
|
||||
battlesuits: BattlesuitData[]
|
||||
}
|
||||
|
||||
const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
|
||||
return (
|
||||
<Box>
|
||||
<Honkai3rdNavigator />
|
||||
|
||||
<Box p={3}>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ href: '/honkai3rd', label: 'Honkai 3rd' },
|
||||
{ href: '/honkai3rd/battlesuits', label: 'Battlesuits' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Heading as='h1'>Battlesuits</Heading>
|
||||
|
||||
<Flex
|
||||
sx={{
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'space-around',
|
||||
}}
|
||||
>
|
||||
{battlesuits.map((battlesuit) => {
|
||||
return (
|
||||
<Box
|
||||
key={battlesuit.id}
|
||||
sx={{
|
||||
width: '160px',
|
||||
padding: 2,
|
||||
margin: 1,
|
||||
borderColor: 'gray.3',
|
||||
borderWidth: 1,
|
||||
borderStyle: 'solid',
|
||||
borderRadius: 8,
|
||||
'&:hover': {
|
||||
borderColor: 'gray.3',
|
||||
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
|
||||
transition: 'box-shadow 200ms ease-in-out',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<NextLink
|
||||
href={`/honkai3rd/battlesuits/${battlesuit.id}`}
|
||||
key={battlesuit.id}
|
||||
passHref={true}
|
||||
>
|
||||
<Link>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<div
|
||||
className='rounded'
|
||||
style={{
|
||||
width: '140px',
|
||||
height: '140px',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%) translateX(-50%)',
|
||||
}}
|
||||
height='140'
|
||||
src={`/assets/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
width: '100%',
|
||||
whiteSpace: 'nowrap',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Text>{battlesuit.name}</Text>
|
||||
</Box>
|
||||
</Link>
|
||||
</NextLink>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default BattlesuitListPage
|
||||
|
||||
export async function getStaticProps() {
|
||||
return {
|
||||
props: {
|
||||
battlesuits: listBattlesuits(),
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { Box, Heading, Link, Image } from '@theme-ui/components'
|
||||
import NextLink from 'next/link'
|
||||
import React from 'react'
|
||||
import Breadcrumb from '../../components/organisms/Breadcrumb'
|
||||
import Honkai3rdNavigator from '../../components/organisms/Honkai3rdNavigator'
|
||||
|
||||
const Honkai3rdIndexPage = () => {
|
||||
return (
|
||||
<Box>
|
||||
<Honkai3rdNavigator />
|
||||
|
||||
<Box p={3}>
|
||||
<Breadcrumb items={[{ href: 'honkai3rd', label: 'Honkai 3rd' }]} />
|
||||
<Heading as='h1'>Honkai 3rd</Heading>
|
||||
<Box>
|
||||
<Image src='/assets/honkai3rd/wallpaper.png' width='100%' />
|
||||
</Box>
|
||||
<Box>
|
||||
<NextLink href={`/honkai3rd/battlesuits`} passHref>
|
||||
<Link>Battlesuits</Link>
|
||||
</NextLink>
|
||||
</Box>
|
||||
<Box>
|
||||
<NextLink href={`/honkai3rd/stigmata`} passHref>
|
||||
<Link>Stigmata</Link>
|
||||
</NextLink>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default Honkai3rdIndexPage
|
||||
@@ -0,0 +1,127 @@
|
||||
import {
|
||||
NavLink,
|
||||
Box,
|
||||
Card,
|
||||
Heading,
|
||||
Text,
|
||||
Paragraph,
|
||||
} from '@theme-ui/components'
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
import {
|
||||
StigmataData,
|
||||
listStigmata,
|
||||
getStigmataById,
|
||||
getStigmataListBySetId,
|
||||
getStigmataSetBySetId,
|
||||
StigmataSet,
|
||||
} from '../../../data/honkai3rd/stigmata'
|
||||
|
||||
interface StigmataShowPageProps {
|
||||
stigmataData: StigmataData
|
||||
stigmataSetList: StigmataData[]
|
||||
stigmataSet?: StigmataSet
|
||||
}
|
||||
|
||||
const StigmataListPage = ({
|
||||
stigmataData,
|
||||
stigmataSetList = [],
|
||||
stigmataSet,
|
||||
}: StigmataShowPageProps) => {
|
||||
return (
|
||||
<Box>
|
||||
<Box>
|
||||
<Link passHref href='/honkai3rd'>
|
||||
<NavLink>Honkai 3rd</NavLink>
|
||||
</Link>
|
||||
<Link passHref href='/honkai3rd/stigmata'>
|
||||
<NavLink>Stigmata</NavLink>
|
||||
</Link>
|
||||
</Box>
|
||||
|
||||
<Heading as='h1'>{stigmataData.name}</Heading>
|
||||
|
||||
<img src={`/assets/honkai3rd/stigmata/${stigmataData.id}.png`} />
|
||||
|
||||
<Box>
|
||||
<Heading as='h2'>Skill - {stigmataData.skill.name}</Heading>
|
||||
<Paragraph>{stigmataData.skill.description}</Paragraph>
|
||||
</Box>
|
||||
|
||||
{stigmataSet != null && (
|
||||
<Box>
|
||||
<Heading as='h2'>Set</Heading>
|
||||
<Box>
|
||||
{stigmataSetList.map((stigmataSetItem) => {
|
||||
return (
|
||||
<Link
|
||||
key={stigmataSetItem.id}
|
||||
href={`/honkai3rd/stigmata/${stigmataSetItem.id}`}
|
||||
>
|
||||
<a>
|
||||
<div
|
||||
className='rounded'
|
||||
style={{
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%) translateX(-50%)',
|
||||
}}
|
||||
height='100'
|
||||
src={`/assets/honkai3rd/stigmata/icon-${stigmataSetItem.id}.png`}
|
||||
/>
|
||||
</div>
|
||||
<Text>{stigmataSetItem.name}</Text>
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading as='h3'>{stigmataSet.twoSetSkill.name}</Heading>
|
||||
<Paragraph>{stigmataSet.twoSetSkill.description}</Paragraph>
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading as='h3'>{stigmataSet.threeSetSkill.name}</Heading>
|
||||
<Paragraph>{stigmataSet.threeSetSkill.description}</Paragraph>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default StigmataListPage
|
||||
|
||||
export async function getStaticProps(ctx) {
|
||||
const stigmataData = getStigmataById(ctx.params.stigmataId)
|
||||
|
||||
return {
|
||||
props: {
|
||||
stigmataData: stigmataData,
|
||||
stigmataSetList: getStigmataListBySetId(stigmataData.set).sort(
|
||||
(a, b) => -a.type.localeCompare(b.type)
|
||||
),
|
||||
stigmataSet: getStigmataSetBySetId(stigmataData.set) || null,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export async function getStaticPaths() {
|
||||
return {
|
||||
paths: listStigmata().map((stigmata) => {
|
||||
return {
|
||||
params: { stigmataId: stigmata.id },
|
||||
}
|
||||
}),
|
||||
fallback: true,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
/** @jsxImportSource theme-ui */
|
||||
import { Text, NavLink, Box, Heading, Flex, Link } from '@theme-ui/components'
|
||||
import NextLink from 'next/link'
|
||||
import Breadcrumb from '../../../components/organisms/Breadcrumb'
|
||||
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
|
||||
import { StigmataData, listStigmata } from '../../../data/honkai3rd/stigmata'
|
||||
|
||||
interface StigmataListPageProps {
|
||||
stigmataDataList: StigmataData[]
|
||||
}
|
||||
|
||||
const StigmataListPage = ({ stigmataDataList }: StigmataListPageProps) => {
|
||||
return (
|
||||
<Box>
|
||||
<Honkai3rdNavigator />
|
||||
|
||||
<Box p={3}>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ href: '/honkai3rd', label: 'Honkai 3rd' },
|
||||
{ href: '/honkai3rd/stigmata', label: 'Stigmata' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Heading as='h1'>Stigmata</Heading>
|
||||
|
||||
<Flex
|
||||
sx={{
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'space-around',
|
||||
}}
|
||||
>
|
||||
{stigmataDataList.map((stigmata) => {
|
||||
return (
|
||||
<Box
|
||||
key={stigmata.id}
|
||||
sx={{
|
||||
width: '120px',
|
||||
padding: 2,
|
||||
margin: 1,
|
||||
borderColor: 'gray.3',
|
||||
borderWidth: 1,
|
||||
borderStyle: 'solid',
|
||||
borderRadius: 8,
|
||||
'&:hover': {
|
||||
borderColor: 'gray.3',
|
||||
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
|
||||
transition: 'box-shadow 200ms ease-in-out',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<NextLink
|
||||
href={`/honkai3rd/stigmata/${stigmata.id}`}
|
||||
key={stigmata.id}
|
||||
passHref={true}
|
||||
>
|
||||
<Link>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<div
|
||||
className='rounded'
|
||||
style={{
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%) translateX(-50%)',
|
||||
}}
|
||||
height='100'
|
||||
src={`/assets/honkai3rd/stigmata/icon-${stigmata.id}.png`}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
width: '100%',
|
||||
whiteSpace: 'nowrap',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Text>{stigmata.name}</Text>
|
||||
</Box>
|
||||
<Box sx={{ fontSize: 1, textAlign: 'center' }}>
|
||||
{'⭐'.repeat(stigmata.rarity)}
|
||||
</Box>
|
||||
</Link>
|
||||
</NextLink>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default StigmataListPage
|
||||
|
||||
export async function getStaticProps() {
|
||||
return {
|
||||
props: {
|
||||
stigmataDataList: listStigmata(),
|
||||
},
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user