Add remembrance sigils page

2022-04-06 05:11:34 +09:00
parent 27f9d532eb
commit 075f572a3b
45 changed files with 277 additions and 11 deletions
@@ -10,15 +10,15 @@ import { getI18NProps } from '../../../server/i18n'
 import { useTranslation } from '../../../lib/i18n'
 import Head from '../../../components/atoms/Head'
 import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
-import {
-  erVersions,
-  rememberanceSigilIds,
-} from '../../../lib/honkai3rd/elysianRealm'
+import { erVersions } 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'
+import {
+  getRemembranceSigils as getRemembranceSigils,
+  getSupportBattlesuits,
+} from '../../../server/data/honkai3rd/elysianRealm'

 type BattlesuitListItemData = Pick<
  BattlesuitData,
@@ -28,11 +28,13 @@ type BattlesuitListItemData = Pick<
 interface BattlesuitListPageProps {
  battlesuitMap: { [id: string]: BattlesuitListItemData }
  supportBattlesuits: { id: string; name: string }[]
+  remembranceSigils: { id: string; name: string }[]
 }

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

@@ -118,15 +120,15 @@ const ElysianRealmIndexPage = ({
          <Heading as='h2'>{t('elysian-realm.remembrance-sigil')}</Heading>

          <Flex sx={{ flexWrap: 'wrap' }}>
-            {rememberanceSigilIds.map((sigilId) => {
+            {remembranceSigils.map(({ id, name }) => {
              return (
-                <Card key={sigilId} sx={{ p: 1, m: 1 }}>
+                <Card key={id} sx={{ p: 1, m: 1 }} title={name}>
                  <PageLink
-                    href={`/honkai3rd/elysian-realm/remembrance-sigils#${sigilId}`}
+                    href={`/honkai3rd/elysian-realm/remembrance-sigils#${id}`}
                  >
                    <SquareImageBox
                      size={70}
-                      src={`${assetsBucketBaseUrl}/honkai3rd/elysian-realm/remembrance-sigils/${sigilId}.png`}
+                      src={`${assetsBucketBaseUrl}/honkai3rd/elysian-realm/remembrance-sigils/${id}.png`}
                    />
                  </PageLink>
                </Card>
@@ -155,10 +157,18 @@ export async function getStaticProps({ locale }: NextPageContext) {
      }
    }
  )
+
+  const remembranceSigils = getRemembranceSigils(locale).map(({ id, name }) => {
+    return {
+      id,
+      name,
+    }
+  })
  return {
    props: {
      battlesuitMap: getBattlesuitMapByIds(erBattlesuitIds),
      supportBattlesuits,
+      remembranceSigils,
      ...(await getI18NProps(locale)),
    },
  }
@@ -0,0 +1,93 @@
+/** @jsxImportSource theme-ui */
+import { Box, Heading, Flex, Card, Paragraph } 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 { RemembranceSigil } from '../../../lib/honkai3rd/elysianRealm'
+import SquareImageBox from '../../../components/atoms/SquareImageBox'
+import { assetsBucketBaseUrl } from '../../../lib/consts'
+import { getRemembranceSigils } from '../../../server/data/honkai3rd/elysianRealm'
+
+interface BattlesuitListPageProps {
+  remembranceSigils: RemembranceSigil[]
+}
+
+const ElysianRealmIndexPage = ({
+  remembranceSigils,
+}: BattlesuitListPageProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <Honkai3rdLayout>
+      <Head
+        title={`${t('elysian-realm.remembrance-sigil')} (${t(
+          'common.elysian-realm'
+        )}) - ${t('common.honkai-3rd')} - ${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/remembrance-sigils',
+              label: t('elysian-realm.remembrance-sigil'),
+            },
+          ]}
+        />
+
+        <Heading as='h1' mb={3}>
+          {t('elysian-realm.remembrance-sigil')}
+        </Heading>
+
+        <Box sx={{ mb: 3 }}>
+          {remembranceSigils.map(({ id, name, description }) => {
+            return (
+              <Card key={id} sx={{ p: 2, mb: 2 }} id={id}>
+                <Flex>
+                  <SquareImageBox
+                    size={50}
+                    alt={name}
+                    src={`${assetsBucketBaseUrl}/honkai3rd/elysian-realm/remembrance-sigils/${id}.png`}
+                    mr={2}
+                  />
+
+                  <Box>
+                    <Heading as='h3' mb={2}>
+                      {name}
+                    </Heading>
+                    <Paragraph>{description}</Paragraph>
+                  </Box>
+                </Flex>
+              </Card>
+            )
+          })}
+        </Box>
+      </Box>
+    </Honkai3rdLayout>
+  )
+}
+
+export default ElysianRealmIndexPage
+
+export async function getStaticProps({ locale }: NextPageContext) {
+  const remembranceSigils = getRemembranceSigils(locale)
+
+  return {
+    props: {
+      remembranceSigils,
+      ...(await getI18NProps(locale)),
+    },
+  }
+}
@@ -54,7 +54,9 @@ const ElysianRealmIndexPage = ({
          ]}
        />

-        <Heading as='h1'>{t('elysian-realm.supports')}</Heading>
+        <Heading as='h1' mb={3}>
+          {t('elysian-realm.supports')}
+        </Heading>

        <Box sx={{ mb: 3 }}>
          {supportBattlesuits.map(