Add support battlesuits page

2022-04-06 04:37:55 +09:00
parent 65b40a10be
commit 1e5358aa40
21 changed files with 253 additions and 7 deletions
@@ -13,12 +13,12 @@ import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 import {
  erVersions,
  rememberanceSigilIds,
-  supportBattlesuitIds,
 } from '../../../lib/honkai3rd/elysianRealm'
 import SquareImageBox from '../../../components/atoms/SquareImageBox'
 import { assetsBucketBaseUrl } from '../../../lib/consts'
 import PageLink from '../../../components/atoms/PageLink'
 import SignetGroupNavigator from '../../../components/organisms/SignetGroupNavigator'
+import { getSupportBattlesuits } from '../../../server/data/honkai3rd/elysianRealm'

 type BattlesuitListItemData = Pick<
  BattlesuitData,
@@ -27,9 +27,13 @@ type BattlesuitListItemData = Pick<

 interface BattlesuitListPageProps {
  battlesuitMap: { [id: string]: BattlesuitListItemData }
+  supportBattlesuits: { id: string; name: string }[]
 }

-const ElysianRealmIndexPage = ({ battlesuitMap }: BattlesuitListPageProps) => {
+const ElysianRealmIndexPage = ({
+  battlesuitMap,
+  supportBattlesuits,
+}: BattlesuitListPageProps) => {
  const { t } = useTranslation()

  return (
@@ -90,15 +94,16 @@ const ElysianRealmIndexPage = ({ battlesuitMap }: BattlesuitListPageProps) => {
          <Heading as='h2'>{t('elysian-realm.supports')}</Heading>

          <Flex sx={{ flexWrap: 'wrap' }}>
-            {supportBattlesuitIds.map((battlesuitId) => {
+            {supportBattlesuits.map(({ id, name }) => {
              return (
-                <Card key={battlesuitId} sx={{ p: 1, m: 1 }}>
+                <Card key={id} sx={{ p: 1, m: 1 }} title={name}>
                  <PageLink
-                    href={`/honkai3rd/elysian-realm/support-battlesuits#${battlesuitId}`}
+                    href={`/honkai3rd/elysian-realm/support-battlesuits#${id}`}
                  >
                    <SquareImageBox
                      size={70}
-                      src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${battlesuitId}.png`}
+                      alt={name}
+                      src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${id}.png`}
                    />
                  </PageLink>
                </Card>
@@ -139,9 +144,19 @@ export async function getStaticProps({ locale }: NextPageContext) {
    list.push(...version.battlesuits)
    return list
  }, [])
+
+  const supportBattlesuits = getSupportBattlesuits(locale).map(
+    ({ id, name }) => {
+      return {
+        id,
+        name,
+      }
+    }
+  )
  return {
    props: {
      battlesuitMap: getBattlesuitMapByIds(erBattlesuitIds),
+      supportBattlesuits,
      ...(await getI18NProps(locale)),
    },
  }
@@ -0,0 +1,101 @@
+/** @jsxImportSource theme-ui */
+import {
+  Box,
+  Heading,
+  Flex,
+  Card,
+  Paragraph,
+  Badge,
+} from '@theme-ui/components'
+import Breadcrumb from '../../../components/organisms/Breadcrumb'
+
+import { NextPageContext } from 'next'
+import { getI18NProps } from '../../../server/i18n'
+import { useTranslation } from '../../../lib/i18n'
+import Head from '../../../components/atoms/Head'
+import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
+import { SupportBattlesuit } from '../../../lib/honkai3rd/elysianRealm'
+import SquareImageBox from '../../../components/atoms/SquareImageBox'
+import { assetsBucketBaseUrl } from '../../../lib/consts'
+import { getSupportBattlesuits } from '../../../server/data/honkai3rd/elysianRealm'
+
+interface BattlesuitListPageProps {
+  supportBattlesuits: SupportBattlesuit[]
+}
+
+const ElysianRealmIndexPage = ({
+  supportBattlesuits,
+}: BattlesuitListPageProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <Honkai3rdLayout>
+      <Head
+        title={`${t('common.honkai-3rd')}: ${t('common.elysian-realm')} ${t(
+          'elysian-realm.supports'
+        )} - ${t('common.abyss-lab')}`}
+        description={`${t('common.elysian-realm')} ${t(
+          'elysian-realm.supports'
+        )}`}
+      />
+
+      <Box p={3}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: '/honkai3rd/elysian-realm',
+              label: t('common.elysian-realm'),
+            },
+            {
+              href: '/honkai3rd/elysian-realm/support-battlesuits',
+              label: t('elysian-realm.supports'),
+            },
+          ]}
+        />
+
+        <Heading as='h1'>{t('elysian-realm.supports')}</Heading>
+
+        <Box sx={{ mb: 3 }}>
+          {supportBattlesuits.map(
+            ({ id, name, skillName, description, cooldown }) => {
+              return (
+                <Card key={id} sx={{ p: 2, mb: 2 }} id={id}>
+                  <Flex>
+                    <SquareImageBox
+                      size={50}
+                      alt={name}
+                      src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${id}.png`}
+                      mr={2}
+                    />
+
+                    <Box>
+                      <Heading as='h3' mb={0}>
+                        {name} - {skillName}
+                      </Heading>
+                      <Badge variant='secondary'>Cooldown: {cooldown}s</Badge>
+                      <Paragraph>{description}</Paragraph>
+                    </Box>
+                  </Flex>
+                </Card>
+              )
+            }
+          )}
+        </Box>
+      </Box>
+    </Honkai3rdLayout>
+  )
+}
+
+export default ElysianRealmIndexPage
+
+export async function getStaticProps({ locale }: NextPageContext) {
+  const supportBattlesuits = getSupportBattlesuits(locale)
+
+  return {
+    props: {
+      supportBattlesuits,
+      ...(await getI18NProps(locale)),
+    },
+  }
+}