Added signets pages

2022-04-06 02:43:37 +09:00
parent 5e88ee532a
commit 2508a3311e
128 changed files with 5309 additions and 1 deletions
@@ -0,0 +1,59 @@
+/** @jsxImportSource theme-ui */
+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 SquareImageBox from '../atoms/SquareImageBox'
+
+interface SignetCardProps {
+  signet: SignetData
+  headingLevel?: 1 | 2 | 3 | 4 | 5
+  m?: number
+}
+
+const SignetCard = ({ signet, headingLevel = 3, m = 2 }: SignetCardProps) => {
+  const [signetGroupId] = signet.id.split('-')
+  const { t } = useTranslation()
+  return (
+    <Card sx={{ mb: 2 }}>
+      <Box sx={{ p: 2 }}>
+        <Heading as={`h${headingLevel}`}>
+          <Flex sx={{ alignItems: 'center' }}>
+            <SquareImageBox
+              mr={2}
+              size={30}
+              alt={signet.name}
+              src={`${assetsBucketBaseUrl}/honkai3rd/elysian-realm/signets/${signetGroupId}.png`}
+            />
+            <Text>{signet.name}</Text>
+          </Flex>
+        </Heading>
+        <Paragraph>{signet.description}</Paragraph>
+      </Box>
+      <Box>
+        {signet.upgrades.map((upgrade, index) => {
+          return (
+            <Box
+              key={`${signet.id}-${index + 1}`}
+              sx={{ borderTop: 'default', p: 2 }}
+            >
+              <Heading as={`h${headingLevel + 1}` as 'h1'}>
+                {upgrade.name}
+              </Heading>
+              <Paragraph>{upgrade.description}</Paragraph>
+            </Box>
+          )
+        })}
+        {signet.upgrades.length === 0 && (
+          <Box sx={{ borderTop: 'default', p: 2 }}>
+            <Text sx={{ color: 'secondary' }}>
+              {t('elysian-realm.no-upgrades')}
+            </Text>
+          </Box>
+        )}
+      </Box>
+    </Card>
+  )
+}
+
+export default SignetCard
@@ -0,0 +1,53 @@
+/** @jsxImportSource theme-ui */
+import { Card, Text, Flex } from '@theme-ui/components'
+import { useRouter } from 'next/router'
+import { assetsBucketBaseUrl } from '../../lib/consts'
+import { signetGroups } from '../../lib/honkai3rd/elysianRealm'
+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 { locale } = useRouter()
+  return (
+    <Flex sx={{ flexWrap: 'wrap' }}>
+      {signetGroups.map((signet) => {
+        const signetName = translate(
+          locale,
+          { ['ko-KR']: signet.krName },
+          signet.name
+        )
+        return (
+          <Card key={signet.id} sx={{ p: 1, m: 1 }}>
+            <PageLink href={`/honkai3rd/elysian-realm/signets/${signet.id}`}>
+              <Flex
+                sx={{
+                  flexDirection: size === 'default' ? 'column' : 'row',
+                  justifyContent: 'center',
+                }}
+              >
+                <SquareImageBox
+                  size={size === 'default' ? 70 : 30}
+                  src={`${assetsBucketBaseUrl}/honkai3rd/elysian-realm/signets/${signet.id}.png`}
+                />
+                <Text
+                  sx={{ textAlign: 'center', ml: size === 'default' ? 0 : 1 }}
+                >
+                  {signetName}
+                </Text>
+              </Flex>
+            </PageLink>
+          </Card>
+        )
+      })}
+    </Flex>
+  )
+}
+
+export default SignetGroupNavigator