Improve version page

src/pages/honkai3rd/enemies.tsx

@@ -19,11 +19,11 @@ const NumberArray = times((index) => {
 }, 1000)
 
 const BossSearchPage = ({}: BossSearchPageProps) => {
-  return NumberArray.map((number) => number + '.png').map((item) => {
+  return NumberArray.map((item) => {
     return (
       <img
         key={item}
-        src={`https://upload-os-bbs.mihoyo.com/game_record/honkai3rd/global/SpriteOutput/OpenWorld/QuestBossIcon/BOSS_${item}`}
+        src={`https://upload-os-bbs.mihoyo.com/game_record/honkai3rd/global/SpriteOutput/OpenWorld/QuestBossIcon/DG_${item}_M01.png`}
       />
     )
   })

src/pages/honkai3rd/versions/[versionId].tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource theme-ui */
-import { Box, Heading, Link, Flex, Text, Paragraph } from '@theme-ui/components'
+import { Box, Heading, Flex, Text, Paragraph } from '@theme-ui/components'
 import { NextPageContext } from 'next'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import GanttChart from '../../../components/organisms/GanttChart'
@@ -9,7 +9,6 @@ import {
 } from '../../../server/data/honkai3rd/versions'
 import { format as formatDate } from 'date-fns'
 import { getBattlesuitById } from '../../../server/data/honkai3rd/battlesuits'
-import NextLink from 'next/link'
 import SquareImageBox from '../../../components/atoms/SquareImageBox'
 import { getWeaponById } from '../../../server/data/honkai3rd/weapons'
 import ScrollContainer from 'react-indiana-drag-scroll'
@@ -25,17 +24,24 @@ import { assetsBucketBaseUrl } from '../../../lib/consts'
 import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 import { useEffect, useState } from 'react'
 import BossTable from '../../../components/organisms/BossTable'
+import StigmataSetCard from '../../../components/molecules/StigmataSetCard'
+import WeaponCard from '../../../components/molecules/WeaponCard'
+import BattlesuitCard from '../../../components/molecules/BattlesuitCard'
+import { getStigmataSetBySetId } from '../../../server/data/honkai3rd/stigmata'
+import { StigmataSet } from '../../../lib/honkai3rd/stigmata'
 
 interface VersionShowPageProps {
   versionData: VersionData
   battlesuits: BattlesuitData[]
   weapons: WeaponData[]
+  stigmataSets: StigmataSet[]
 }
 
 const VersionShowPage = ({
   versionData,
   battlesuits,
   weapons,
+  stigmataSets,
 }: VersionShowPageProps) => {
   const { t } = useTranslation()
   const [today, setToday] = useState<Date | null>(null)
@@ -102,26 +108,14 @@ const VersionShowPage = ({
             <Heading as='h3' mb={2}>
               {t('versions.new-battlesuits')}
             </Heading>
-            <Box mb={3} sx={{ display: 'inline-block' }}>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
               {battlesuits.map((battlesuit) => {
                 return (
-                  <NextLink
+                  <BattlesuitCard
                     key={battlesuit.id}
-                    href={`/honkai3rd/battlesuits/${battlesuit.id}`}
-                    passHref
-                  >
-                    <Link>
-                      <Flex sx={{ alignItems: 'center' }} mb={2}>
-                        <SquareImageBox
-                          size={40}
-                          src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
-                          alt={`${battlesuit.name}`}
-                          mr={2}
-                        />
-                        <Text>{battlesuit.name}</Text>
-                      </Flex>
-                    </Link>
-                  </NextLink>
+                    battlesuit={battlesuit}
+                    size='sm'
+                  />
                 )
               })}
             </Box>
@@ -129,26 +123,23 @@ const VersionShowPage = ({
             <Heading as='h3' mb={2}>
               {t('versions.new-weapons')}
             </Heading>
-            <Box mb={3} sx={{ display: 'inline-block' }}>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
               {weapons.map((weapon) => {
+                return <WeaponCard key={weapon.id} weapon={weapon} size='sm' />
+              })}
+            </Box>
+
+            <Heading as='h3' mb={2}>
+              {t('versions.new-stigmata-sets')}
+            </Heading>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
+              {stigmataSets.map((stigmataSet) => {
                 return (
-                  <NextLink
-                    key={weapon.id}
-                    href={`/honkai3rd/weapons/${weapon.id}`}
-                    passHref
-                  >
-                    <Link>
-                      <Flex sx={{ alignItems: 'center' }} mb={2}>
-                        <SquareImageBox
-                          size={40}
-                          src={`${assetsBucketBaseUrl}/honkai3rd/weapons/${weapon.id}.png`}
-                          alt={`${weapon.name}`}
-                          mr={2}
-                        />
-                        <Text>{weapon.name}</Text>
-                      </Flex>
-                    </Link>
-                  </NextLink>
+                  <StigmataSetCard
+                    key={stigmataSet.id}
+                    stigmataSet={stigmataSet}
+                    size='sm'
+                  />
                 )
               })}
             </Box>
@@ -225,12 +216,16 @@ export async function getStaticProps({
   const weapons = versionData.newWeapons.map((weaponId) => {
     return getWeaponById(weaponId, locale)
   })
+  const stigmataSets = versionData.newStigmataSets.map((stigmataSetId) => {
+    return getStigmataSetBySetId(stigmataSetId, locale)
+  })
 
   return {
     props: {
       versionData,
       battlesuits,
       weapons,
+      stigmataSets,
       ...(await getI18NProps(locale)),
     },
   }

src/pages/honkai3rd/versions/index.tsx

@@ -27,12 +27,16 @@ import WeaponCard from '../../../components/molecules/WeaponCard'
 import BattlesuitCard from '../../../components/molecules/BattlesuitCard'
 import { useEffect, useState } from 'react'
 import BossTable from '../../../components/organisms/BossTable'
+import { getStigmataSetBySetId } from '../../../server/data/honkai3rd/stigmata'
+import { StigmataSet } from '../../../lib/honkai3rd/stigmata'
+import StigmataSetCard from '../../../components/molecules/StigmataSetCard'
 
 interface VersionIndexPageProps {
   versionDataList: VersionData[]
   currentVersionData: VersionData
   currentVersionNewBattlesuits: BattlesuitData[]
   currentVersionNewWeapons: WeaponData[]
+  currentVersionNewStigmataSets: StigmataSet[]
 }
 
 const VersionIndexPage = ({
@@ -40,6 +44,7 @@ const VersionIndexPage = ({
   currentVersionNewBattlesuits,
   versionDataList,
   currentVersionNewWeapons,
+  currentVersionNewStigmataSets,
 }: VersionIndexPageProps) => {
   const { t } = useTranslation()
   const [today, setToday] = useState<Date | null>(null)
@@ -98,7 +103,7 @@ const VersionIndexPage = ({
             <Heading as='h3' mb={2}>
               {t('versions.new-battlesuits')}
             </Heading>
-            <Box mb={3} sx={{ display: 'inline-block' }}>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
               {currentVersionNewBattlesuits.map((battlesuit) => {
                 return (
                   <BattlesuitCard
@@ -113,11 +118,26 @@ const VersionIndexPage = ({
             <Heading as='h3' mb={2}>
               {t('versions.new-weapons')}
             </Heading>
-            <Box mb={3} sx={{ display: 'inline-block' }}>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
               {currentVersionNewWeapons.map((weapon) => {
                 return <WeaponCard key={weapon.id} weapon={weapon} size='sm' />
               })}
             </Box>
+
+            <Heading as='h3' mb={2}>
+              {t('versions.new-stigmata-sets')}
+            </Heading>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
+              {currentVersionNewStigmataSets.map((stigmataSet) => {
+                return (
+                  <StigmataSetCard
+                    key={stigmataSet.id}
+                    stigmataSet={stigmataSet}
+                    size='sm'
+                  />
+                )
+              })}
+            </Box>
           </Box>
 
           <Heading as='h3' mb={2}>
@@ -222,11 +242,18 @@ export async function getStaticProps({ locale }: NextPageContext) {
     }
   )
 
+  const currentVersionNewStigmataSets = currentVersionData.newStigmataSets.map(
+    (stigmataSetId) => {
+      return getStigmataSetBySetId(stigmataSetId, locale)
+    }
+  )
+
   return {
     props: {
       currentVersionData,
       currentVersionNewBattlesuits,
       currentVersionNewWeapons,
+      currentVersionNewStigmataSets,
       versionDataList: listVersionData(locale),
       ...(await getI18NProps(locale)),
     },