Improve weapons.show and battlesuits.show pages

2022-03-21 19:28:54 +09:00
parent fe212abac4
commit d9e2a7b3fa
7 changed files with 301 additions and 8 deletions
@@ -0,0 +1,124 @@
+/** @jsxImportSource theme-ui */
+import { Card, Paragraph, Heading } from '@theme-ui/components'
+import { SourceData } from '../../lib/honkai3rd/sources'
+
+import { useTranslation } from '../../lib/i18n'
+
+interface SourceCardProps {
+  source: SourceData
+}
+
+const SourceCard = ({ source }: SourceCardProps) => {
+  const { t } = useTranslation()
+  switch (source.type) {
+    case 'spirit-weapon-foundry':
+      return (
+        <SourceCardConatiner>
+          <SourceCardHeading>
+            {t('sources.sprit-weapon-foundry.label')}
+          </SourceCardHeading>
+          <SourceCardDescription>
+            {t('sources.sprit-weapon-foundry.description')}
+          </SourceCardDescription>
+        </SourceCardConatiner>
+      )
+    case 'dorm-equipment-supply':
+      return (
+        <SourceCardConatiner>
+          <SourceCardHeading>
+            {t('sources.dorm-equipment-supply.label')}
+          </SourceCardHeading>
+          <SourceCardDescription>
+            {t('sources.dorm-equipment-supply.description')}
+          </SourceCardDescription>
+        </SourceCardConatiner>
+      )
+    case 'focused-supply':
+      return (
+        <SourceCardConatiner>
+          <SourceCardHeading>
+            {t('sources.focused-supply.label')}
+          </SourceCardHeading>
+          <SourceCardDescription>
+            {t('sources.focused-supply.description')}
+          </SourceCardDescription>
+        </SourceCardConatiner>
+      )
+    case 'pri-weapon-foundry':
+      return (
+        <SourceCardConatiner>
+          <SourceCardHeading>
+            {t('sources.pri-weapon-foundry.label')}
+          </SourceCardHeading>
+          <SourceCardDescription>
+            {t('sources.pri-weapon-foundry.description')}
+          </SourceCardDescription>
+        </SourceCardConatiner>
+      )
+    case 'weapon-exchange':
+      return (
+        <SourceCardConatiner>
+          <SourceCardHeading>
+            {t('sources.weapon-exchange.label')}
+          </SourceCardHeading>
+          <SourceCardDescription>
+            {t('sources.weapon-exchange.description')}
+          </SourceCardDescription>
+        </SourceCardConatiner>
+      )
+    case 'stigmata-exchange':
+      return (
+        <SourceCardConatiner>
+          <SourceCardHeading>
+            {t('sources.stigmata-exchange.label')}
+          </SourceCardHeading>
+          <SourceCardDescription>
+            {t('sources.stigmata-exchange.description')}
+          </SourceCardDescription>
+        </SourceCardConatiner>
+      )
+    case 'special-divine-key-supply':
+      return (
+        <SourceCardConatiner>
+          <SourceCardHeading>
+            {t('sources.special-divine-key-supply.label')}
+          </SourceCardHeading>
+          <SourceCardDescription>
+            {t('sources.special-divine-key-supply.description')}
+          </SourceCardDescription>
+        </SourceCardConatiner>
+      )
+    default:
+      return (
+        <SourceCardConatiner>
+          <SourceCardDescription>Unknown: {source.type}</SourceCardDescription>
+        </SourceCardConatiner>
+      )
+  }
+}
+
+export default SourceCard
+
+const SourceCardConatiner: React.FC = ({ children }) => {
+  return (
+    <Card
+      sx={{
+        m: 1,
+      }}
+    >
+      {children}
+    </Card>
+  )
+}
+
+const SourceCardHeading: React.FC = ({ children }) => {
+  return (
+    <Heading as='h4' sx={{ borderBottom: 'default', p: 1, m: 0 }}>
+      {children}
+    </Heading>
+  )
+}
+
+const SourceCardDescription: React.FC = ({ children }) => {
+  return <Paragraph sx={{ p: 1 }}>{children}</Paragraph>
+}