retr0volkov/abyss-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimize all pages

Browse Source
This commit is contained in:
Sakura Knoll
2021-12-20 17:59:56 +09:00 Unverified
parent cba32325d8
commit 7616ec7f51
8 changed files with 203 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/honkai3rd/battlesuits/[battlesuitId].tsx
+28 -16
View File
@@ -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>
src/pages/honkai3rd/battlesuits/index.tsx
+21 -25
View File
@@ -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)
),
},
}
}
src/pages/honkai3rd/index.tsx
+6 -3
View File
@@ -1,4 +1,5 @@
import { Box, Heading, Link, Image } from '@theme-ui/components'
import { Box, Heading, Link } from '@theme-ui/components'
import Image from 'next/image'
import NextLink from 'next/link'
import React from 'react'
import Breadcrumb from '../../components/organisms/Breadcrumb'
@@ -36,11 +37,13 @@ const Honkai3rdIndexPage = () => {
<Box p={3}>
<Breadcrumb items={[{ href: 'honkai3rd', label: 'Honkai 3rd' }]} />
<Heading as='h1'>Honkai 3rd</Heading>
<Box mb={3}>
<Box mb={3} sx={{ position: 'relative', minHeight: 300 }}>
<Image
alt='Honkai 3rd Wallpaper'
src='/assets/honkai3rd/wallpaper.png'
width='100%'
width={640}
height={360}
layout='responsive'
/>
</Box>
<Box mb={3}>
src/pages/honkai3rd/stigmata/[stigmataId].tsx
+84 -67
View File
@@ -1,7 +1,10 @@
import { NavLink, Box, Heading, Text, Paragraph } from '@theme-ui/components'
import { Box, Heading, Text, Paragraph } from '@theme-ui/components'
import { NextPageContext } from 'next'
import Image from 'next/image'
import Link from 'next/link'
import React from 'react'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
import {
StigmataData,
listStigmata,
@@ -24,75 +27,89 @@ const StigmataListPage = ({
}: StigmataShowPageProps) => {
return (
<Box>
<Box>
<Link passHref href='/honkai3rd'>
<NavLink>Honkai 3rd</NavLink>
</Link>
<Link passHref href='/honkai3rd/stigmata'>
<NavLink>Stigmata</NavLink>
</Link>
</Box>
<Honkai3rdNavigator />
<Box p={3}>
<Breadcrumb
items={[
{ href: '/honkai3rd', label: 'Honkai 3rd' },
{ href: '/honkai3rd/stigmata', label: 'Stigmata' },
{
href: `/honkai3rd/stigmata/${stigmataData.id}`,
label: stigmataData.name,
},
]}
/>
<Heading as='h1'>{stigmataData.name}</Heading>
<Heading as='h1'>{stigmataData.name}</Heading>
<img
alt={stigmataData.name}
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
alt={stigmataSetItem.name}
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
mb={3}
sx={{
position: 'relative',
overflow: 'hidden',
width: '100%',
maxWidth: '600px',
borderRadius: 4,
}}
>
<Image
alt={stigmataData.name}
src={`/assets/honkai3rd/stigmata/${stigmataData.id}.png`}
width={600}
height={600}
layout='responsive'
/>
</Box>
)}
<Box mb={3}>
<Heading as='h2'>Skill - {stigmataData.skill.name}</Heading>
<Paragraph>{stigmataData.skill.description}</Paragraph>
</Box>
{stigmataSet != null && (
<Box>
<Heading as='h2'>Set</Heading>
<Box mb={3}>
{stigmataSetList.map((stigmataSetItem) => {
return (
<Link
key={stigmataSetItem.id}
href={`/honkai3rd/stigmata/${stigmataSetItem.id}`}
>
<a>
<Box
sx={{
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px',
borderRadius: 4,
}}
>
<Image
alt={stigmataSetItem.name}
layout='fill'
objectFit='cover'
src={`/assets/honkai3rd/stigmata/icon-${stigmataSetItem.id}.png`}
/>
</Box>
<Text>{stigmataSetItem.name}</Text>
</a>
</Link>
)
})}
</Box>
<Box mb={3}>
<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>
</Box>
)
}
src/pages/honkai3rd/stigmata/index.tsx
+21 -25
View File
@@ -1,12 +1,14 @@
/** @jsxImportSource theme-ui */
import { Text, Box, Heading, Flex, Link } from '@theme-ui/components'
import Image from 'next/image'
import NextLink from 'next/link'
import { pick } from 'ramda'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
import { StigmataData, listStigmata } from '../../../data/honkai3rd/stigmata'
interface StigmataListPageProps {
stigmataDataList: StigmataData[]
stigmataDataList: Pick<StigmataData, 'id' | 'name' | 'rarity'>[]
}
const StigmataListPage = ({ stigmataDataList }: StigmataListPageProps) => {
@@ -55,29 +57,21 @@ const StigmataListPage = ({ stigmataDataList }: StigmataListPageProps) => {
passHref={true}
>
<Link>
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<div
className='rounded'
style={{
width: '100px',
height: '100px',
position: 'relative',
overflow: 'hidden',
borderRadius: 4,
}}
>
<img
alt={stigmata.name}
style={{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translateY(-50%) translateX(-50%)',
}}
height='100'
src={`/assets/honkai3rd/stigmata/icon-${stigmata.id}.png`}
/>
</div>
<Box
sx={{
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px',
borderRadius: 4,
}}
>
<Image
alt={stigmata.name}
layout='fill'
objectFit='cover'
src={`/assets/honkai3rd/stigmata/icon-${stigmata.id}.png`}
/>
</Box>
<Box
sx={{
@@ -109,7 +103,9 @@ export default StigmataListPage
export async function getStaticProps() {
return {
props: {
stigmataDataList: listStigmata(),
stigmataDataList: listStigmata().map((stigmata) =>
pick(['id', 'name', 'rarity'], stigmata)
),
},
}
}
src/pages/honkai3rd/weapons/index.tsx
+21 -25
View File
@@ -1,12 +1,14 @@
/** @jsxImportSource theme-ui */
import { Text, Box, Heading, Flex, Link } from '@theme-ui/components'
import Image from 'next/image'
import NextLink from 'next/link'
import Breadcrumb from '../../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
import { listWeapons, WeaponData } from '../../../data/honkai3rd/weapons'
import { pick } from 'ramda'
interface WeaponListPageProps {
weaponDataList: WeaponData[]
weaponDataList: Pick<WeaponData, 'id' | 'name' | 'rarity'>[]
}
const WeaponListPage = ({ weaponDataList }: WeaponListPageProps) => {
@@ -55,29 +57,21 @@ const WeaponListPage = ({ weaponDataList }: WeaponListPageProps) => {
passHref={true}
>
<Link>
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<div
className='rounded'
style={{
width: '100px',
height: '100px',
position: 'relative',
overflow: 'hidden',
borderRadius: 4,
}}
>
<img
alt={weapon.name}
style={{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translateY(-50%) translateX(-50%)',
}}
height='100'
src={`/assets/honkai3rd/weapons/${weapon.id}.png`}
/>
</div>
<Box
sx={{
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px',
borderRadius: 4,
}}
>
<Image
alt={weapon.name}
layout='fill'
objectFit='cover'
src={`/assets/honkai3rd/weapons/${weapon.id}.png`}
/>
</Box>
<Box
sx={{
@@ -109,7 +103,9 @@ export default WeaponListPage
export async function getStaticProps() {
return {
props: {
weaponDataList: listWeapons(),
weaponDataList: listWeapons().map((weapon) => {
return pick(['name', 'id', 'rarity'], weapon)
}),
},
}
}