Optimize all pages
This commit is contained in:
Sakura Knoll
@@ -1,5 +1,6 @@
|
||||
import { Box, Heading, Paragraph } from '@theme-ui/components'
|
||||
import { NextPageContext } from 'next'
|
||||
import Image from 'next/image'
|
||||
import React from 'react'
|
||||
import Breadcrumb from '../../../components/organisms/Breadcrumb'
|
||||
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
|
||||
@@ -33,10 +34,21 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
|
||||
<Heading as='h1'>{battlesuit.name}</Heading>
|
||||
|
||||
<Box className='mb-4'>
|
||||
<Box>
|
||||
<img
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
width: '100%',
|
||||
maxWidth: '600px',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
alt={battlesuit.name}
|
||||
src={`/assets/honkai3rd/battlesuits/${battlesuit.id}.png`}
|
||||
width={600}
|
||||
height={600}
|
||||
layout='responsive'
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
@@ -49,7 +61,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
|
||||
<Paragraph>{battlesuit.leader.core.description}</Paragraph>
|
||||
{battlesuit.leader.subskills.map((subskill, index) => {
|
||||
return (
|
||||
<>
|
||||
<React.Fragment key={subskill.name}>
|
||||
<Heading as='h4'>
|
||||
{subskill.name}
|
||||
{subskill.requiredRank != null
|
||||
@@ -57,7 +69,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
|
||||
: ''}
|
||||
</Heading>
|
||||
<p>{subskill.description}</p>
|
||||
</>
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
@@ -71,7 +83,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
|
||||
<Paragraph>{battlesuit.passive.core.description}</Paragraph>
|
||||
{battlesuit.passive.subskills.map((subskill, index) => {
|
||||
return (
|
||||
<>
|
||||
<React.Fragment key={subskill.name}>
|
||||
<Heading as='h4'>
|
||||
{subskill.name}
|
||||
{subskill.requiredRank != null
|
||||
@@ -79,7 +91,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
|
||||
: ''}
|
||||
</Heading>
|
||||
<p>{subskill.description}</p>
|
||||
</>
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
@@ -93,7 +105,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
|
||||
<Paragraph>{battlesuit.evasion.core.description}</Paragraph>
|
||||
{battlesuit.evasion.subskills.map((subskill, index) => {
|
||||
return (
|
||||
<>
|
||||
<React.Fragment key={subskill.name}>
|
||||
<Heading as='h4'>
|
||||
{subskill.name}
|
||||
{subskill.requiredRank != null
|
||||
@@ -101,7 +113,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
|
||||
: ''}
|
||||
</Heading>
|
||||
<p>{subskill.description}</p>
|
||||
</>
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
@@ -115,7 +127,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
|
||||
<Paragraph>{battlesuit.special.core.description}</Paragraph>
|
||||
{battlesuit.special.subskills.map((subskill, index) => {
|
||||
return (
|
||||
<>
|
||||
<React.Fragment key={subskill.name}>
|
||||
<Heading as='h4'>
|
||||
{subskill.name}
|
||||
{subskill.requiredRank != null
|
||||
@@ -123,7 +135,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
|
||||
: ''}
|
||||
</Heading>
|
||||
<p>{subskill.description}</p>
|
||||
</>
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
@@ -138,7 +150,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
|
||||
<Paragraph>{battlesuit.ultimate.core.description}</Paragraph>
|
||||
{battlesuit.ultimate.subskills.map((subskill, index) => {
|
||||
return (
|
||||
<>
|
||||
<React.Fragment key={subskill.name}>
|
||||
<Heading as='h4'>
|
||||
{subskill.name}
|
||||
{subskill.requiredRank != null
|
||||
@@ -146,7 +158,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
|
||||
: ''}
|
||||
</Heading>
|
||||
<p>{subskill.description}</p>
|
||||
</>
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
@@ -161,7 +173,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
|
||||
<Paragraph>{battlesuit.basic.core.description}</Paragraph>
|
||||
{battlesuit.basic.subskills.map((subskill, index) => {
|
||||
return (
|
||||
<>
|
||||
<React.Fragment key={subskill.name}>
|
||||
<Heading as='h4'>
|
||||
{subskill.name}
|
||||
{subskill.requiredRank != null
|
||||
@@ -169,7 +181,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
|
||||
: ''}
|
||||
</Heading>
|
||||
<p>{subskill.description}</p>
|
||||
</>
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
@@ -185,7 +197,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
|
||||
<Paragraph>{battlesuit.sp.core.description}</Paragraph>
|
||||
{battlesuit.sp.subskills.map((subskill, index) => {
|
||||
return (
|
||||
<>
|
||||
<React.Fragment key={subskill.name}>
|
||||
<Heading as='h4'>
|
||||
{subskill.name}
|
||||
{subskill.requiredRank != null
|
||||
@@ -193,7 +205,7 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
|
||||
: ''}
|
||||
</Heading>
|
||||
<p>{subskill.description}</p>
|
||||
</>
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import { Box, Heading, Flex, Text, Link } from '@theme-ui/components'
|
||||
import Image from 'next/image'
|
||||
import NextLink from 'next/link'
|
||||
import { pick } from 'ramda'
|
||||
import React from 'react'
|
||||
import Breadcrumb from '../../../components/organisms/Breadcrumb'
|
||||
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
|
||||
@@ -9,7 +11,7 @@ import {
|
||||
} from '../../../data/honkai3rd/battlesuits'
|
||||
|
||||
interface BattlesuitListPageProps {
|
||||
battlesuits: BattlesuitData[]
|
||||
battlesuits: Pick<BattlesuitData, 'id' | 'name'>[]
|
||||
}
|
||||
|
||||
const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
|
||||
@@ -58,29 +60,21 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
|
||||
passHref={true}
|
||||
>
|
||||
<Link>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<div
|
||||
className='rounded'
|
||||
style={{
|
||||
width: '140px',
|
||||
height: '140px',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
alt={battlesuit.name}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%) translateX(-50%)',
|
||||
}}
|
||||
height='140'
|
||||
src={`/assets/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
|
||||
/>
|
||||
</div>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
width: '140px',
|
||||
height: '140px',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
alt={battlesuit.name}
|
||||
layout='fill'
|
||||
objectFit='cover'
|
||||
src={`/assets/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
@@ -109,7 +103,9 @@ export default BattlesuitListPage
|
||||
export async function getStaticProps() {
|
||||
return {
|
||||
props: {
|
||||
battlesuits: listBattlesuits(),
|
||||
battlesuits: listBattlesuits().map((battlesuit) =>
|
||||
pick(['id', 'name'], battlesuit)
|
||||
),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user