From 7616ec7f5152ad8bacccfacd1ddf3a7bae56d2e0 Mon Sep 17 00:00:00 2001
From: Sakura Knoll <s4kura.knoll@gmail.com>
Date: Mon, 20 Dec 2021 17:59:56 +0900
Subject: [PATCH] Optimize all pages

---
 package-lock.json                             |  20 +++
 package.json                                  |   2 +
 .../honkai3rd/battlesuits/[battlesuitId].tsx  |  44 +++--
 src/pages/honkai3rd/battlesuits/index.tsx     |  46 +++---
 src/pages/honkai3rd/index.tsx                 |   9 +-
 src/pages/honkai3rd/stigmata/[stigmataId].tsx | 151 ++++++++++--------
 src/pages/honkai3rd/stigmata/index.tsx        |  46 +++---
 src/pages/honkai3rd/weapons/index.tsx         |  46 +++---
 8 files changed, 203 insertions(+), 161 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2c9a89a7..b97feaa7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -814,6 +814,15 @@
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
       "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
     },
+    "@types/ramda": {
+      "version": "0.27.60",
+      "resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.27.60.tgz",
+      "integrity": "sha512-6ie74xhtl2ducVG8cC8mnYwpvIUWHBoLHbmvEsl5qPqJkqVP9ce5yZW10WgheKd2ua1yPIwd0miMWBsG19UmiQ==",
+      "dev": true,
+      "requires": {
+        "ts-toolbelt": "^6.15.1"
+      }
+    },
     "@types/react": {
       "version": "17.0.37",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz",
@@ -3468,6 +3477,11 @@
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "ramda": {
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.1.tgz",
+      "integrity": "sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw=="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -3976,6 +3990,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "ts-toolbelt": {
+      "version": "6.15.5",
+      "resolved": "https://registry.npmjs.org/ts-toolbelt/-/ts-toolbelt-6.15.5.tgz",
+      "integrity": "sha512-FZIXf1ksVyLcfr7M317jbB67XFJhOO1YqdTcuGaq9q5jLUoTikukZ+98TPjKiP2jC5CgmYdWWYs0s2nLSU0/1A==",
+      "dev": true
+    },
     "tsconfig-paths": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz",
diff --git a/package.json b/package.json
index 5a1552c5..9484f50a 100644
--- a/package.json
+++ b/package.json
@@ -8,12 +8,14 @@
     "@mdi/react": "^1.5.0",
     "bootstrap": "^5.1.3",
     "next": "^12.0.7",
+    "ramda": "^0.27.1",
     "react": "^17.0.2",
     "react-bootstrap": "^2.0.3",
     "react-dom": "^17.0.2",
     "theme-ui": "^0.12.1"
   },
   "devDependencies": {
+    "@types/ramda": "^0.27.60",
     "@types/react": "^17.0.37",
     "eslint": "8.5.0",
     "eslint-config-next": "12.0.7",
diff --git a/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx b/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx
index 4208544b..c4a9396a 100644
--- a/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx
+++ b/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx
@@ -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>
diff --git a/src/pages/honkai3rd/battlesuits/index.tsx b/src/pages/honkai3rd/battlesuits/index.tsx
index f549fd72..bfa43bfa 100644
--- a/src/pages/honkai3rd/battlesuits/index.tsx
+++ b/src/pages/honkai3rd/battlesuits/index.tsx
@@ -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)
+      ),
     },
   }
 }
diff --git a/src/pages/honkai3rd/index.tsx b/src/pages/honkai3rd/index.tsx
index d4b897a6..c92bae10 100644
--- a/src/pages/honkai3rd/index.tsx
+++ b/src/pages/honkai3rd/index.tsx
@@ -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}>
diff --git a/src/pages/honkai3rd/stigmata/[stigmataId].tsx b/src/pages/honkai3rd/stigmata/[stigmataId].tsx
index 325d9ae3..942f6b16 100644
--- a/src/pages/honkai3rd/stigmata/[stigmataId].tsx
+++ b/src/pages/honkai3rd/stigmata/[stigmataId].tsx
@@ -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>
   )
 }
diff --git a/src/pages/honkai3rd/stigmata/index.tsx b/src/pages/honkai3rd/stigmata/index.tsx
index 2756c376..66b90dbd 100644
--- a/src/pages/honkai3rd/stigmata/index.tsx
+++ b/src/pages/honkai3rd/stigmata/index.tsx
@@ -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)
+      ),
     },
   }
 }
diff --git a/src/pages/honkai3rd/weapons/index.tsx b/src/pages/honkai3rd/weapons/index.tsx
index a229bbc2..48bc8bf3 100644
--- a/src/pages/honkai3rd/weapons/index.tsx
+++ b/src/pages/honkai3rd/weapons/index.tsx
@@ -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)
+      }),
     },
   }
 }