Update v5.6 ER data and improve ER pages

src/components/molecules/BattlesuitCard.tsx

@@ -12,6 +12,7 @@ interface BattlesuitCardProps {
   hidden?: boolean
   size?: 'sm' | 'default'
   href?: string
+  m?: number
 }
 
 const BattlesuitCard = ({
@@ -19,6 +20,7 @@ const BattlesuitCard = ({
   hidden,
   size,
   href,
+  m,
 }: BattlesuitCardProps) => {
   const { locale } = useRouter()
 
@@ -37,33 +39,31 @@ const BattlesuitCard = ({
       <Card
         className={hidden ? 'hidden' : ''}
         sx={{
-          width: 'fit-content',
           p: 1,
-          m: 1,
+          m: m == undefined ? 1 : m,
           '&.hidden': {
             display: 'none',
           },
         }}
       >
         <PageLink href={href}>
-          <Flex>
+          <Flex sx={{ alignItems: 'center' }}>
             <SquareImageBox
               mr={2}
               alt={battlesuitName}
               src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
               size={30}
             />
-            <Box
+            <Text
               sx={{
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 width: '100%',
                 whiteSpace: 'nowrap',
-                textAlign: 'center',
               }}
             >
-              <Text sx={{ lineHeight: '30px' }}>{battlesuitName}</Text>
-            </Box>
+              {battlesuitName}
+            </Text>
           </Flex>
         </PageLink>
       </Card>
@@ -76,7 +76,7 @@ const BattlesuitCard = ({
       sx={{
         width: 120,
         padding: 2,
-        margin: 2,
+        m: m == undefined ? 2 : m,
         '&.hidden': {
           display: 'none',
         },

src/components/molecules/SignetCard.tsx

@@ -2,7 +2,7 @@
 import { Card, Box, Paragraph, Heading, Flex, Text } from '@theme-ui/components'
 import { useTranslation } from 'next-i18next'
 import { assetsBucketBaseUrl } from '../../lib/consts'
-import { SignetData } from '../../lib/honkai3rd/elysianRealm'
+import { parseSignetId, SignetData } from '../../lib/honkai3rd/elysianRealm'
 import SquareImageBox from '../atoms/SquareImageBox'
 
 interface SignetCardProps {
@@ -12,7 +12,8 @@ interface SignetCardProps {
 }
 
 const SignetCard = ({ signet, headingLevel = 3, m = 2 }: SignetCardProps) => {
-  const [signetGroupId] = signet.id.split('-')
+  const [signetGroupId] = parseSignetId(signet.id)
+
   const { t } = useTranslation()
   return (
     <Card sx={{ mb: 2 }}>