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 }}>

src/components/organisms/Honkai3rdNavigator.tsx

@@ -124,7 +124,6 @@ const NavItem = ({ target }: NavItemProps) => {
           }}
         >
           {t(`common.${target}`)}
-          {target === 'elysian-realm' ? ` (${t('common.wip')})` : ''}
         </Text>
       </NavLink>
     </NextLink>

src/components/organisms/SignetGroupNavigator.tsx

@@ -7,13 +7,7 @@ import { translate } from '../../lib/i18n'
 import PageLink from '../atoms/PageLink'
 import SquareImageBox from '../atoms/SquareImageBox'
 
-interface SignetGroupNavigatorProps {
-  size?: 'sm' | 'default'
-}
-
-const SignetGroupNavigator = ({
-  size = 'default',
-}: SignetGroupNavigatorProps) => {
+const SignetGroupNavigator = () => {
   const { locale } = useRouter()
   return (
     <Flex sx={{ flexWrap: 'wrap' }}>
@@ -23,23 +17,33 @@ const SignetGroupNavigator = ({
           { ['ko-KR']: signet.krName },
           signet.name
         )
+        const signetAltName = translate(
+          locale,
+          { ['ko-KR']: signet.krAltName },
+          signet.altName
+        )
         return (
-          <Card key={signet.id} sx={{ p: 1, m: 1 }}>
+          <Card key={signet.id} sx={{ p: 1, m: 1, width: [135, 135, 200] }}>
             <PageLink href={`/honkai3rd/elysian-realm/signets/${signet.id}`}>
               <Flex
                 sx={{
-                  flexDirection: size === 'default' ? 'column' : 'row',
-                  justifyContent: 'center',
+                  alignItems: 'center',
                 }}
               >
                 <SquareImageBox
-                  size={size === 'default' ? 70 : 30}
+                  size={30}
                   src={`${assetsBucketBaseUrl}/honkai3rd/elysian-realm/signets/${signet.id}.png`}
                 />
                 <Text
-                  sx={{ textAlign: 'center', ml: size === 'default' ? 0 : 1 }}
+                  sx={{
+                    ml: 2,
+                    overflow: 'hidden',
+                    width: '100%',
+                    whiteSpace: 'nowrap',
+                    textOverflow: 'ellipsis',
+                  }}
                 >
-                  {signetName}
+                  {signetAltName}({signetName})
                 </Text>
               </Flex>
             </PageLink>