Add elf list/show pages

2021-12-23 03:06:17 +09:00
parent dbf3c2a0b2
commit cf6693c24f
2 changed files with 199 additions and 0 deletions
@@ -0,0 +1,93 @@
+import { Box, Flex, Heading, Paragraph } from '@theme-ui/components'
+import { NextPageContext } from 'next'
+import Image from 'next/image'
+import React from 'react'
+import Breadcrumb from '../../../components/organisms/Breadcrumb'
+import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
+import { ElfData, getElfById, listElfs } from '../../../data/honkai3rd/elfs'
+
+interface ElfShowPageProps {
+  elf: ElfData
+}
+
+const ElfShowPage = ({ elf }: ElfShowPageProps) => {
+  return (
+    <Box>
+      <Honkai3rdNavigator />
+
+      <Box p={3}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: 'Honkai 3rd' },
+            { href: '/honkai3rd/elfs', label: 'ELFs' },
+            {
+              href: `/honkai3rd/elfs/${elf.id}`,
+              label: elf.name,
+            },
+          ]}
+        />
+
+        <Heading as='h1'>{elf.name}</Heading>
+
+        <Box className='mb-4'>
+          <Box
+            sx={{
+              position: 'relative',
+              overflow: 'hidden',
+              width: '600px',
+              height: '600px',
+              borderRadius: 4,
+            }}
+          >
+            <Image
+              alt={elf.name}
+              layout='fill'
+              objectFit='cover'
+              src={`/assets/honkai3rd/elfs/${elf.id}.png`}
+            />
+          </Box>
+        </Box>
+        <Box mb={4}>{'⭐'.repeat(elf.baseRank)}</Box>
+        <Box>
+          {elf.skillRows.map((row, rowIndex) => {
+            return (
+              <Box key={rowIndex}>
+                {row.map((item, columnIndex) => {
+                  return (
+                    <Box key={columnIndex}>
+                      <Heading as='h4'>{item.name}</Heading>
+                      <Paragraph>{item.description}</Paragraph>
+                    </Box>
+                  )
+                })}
+                <hr />
+              </Box>
+            )
+          })}
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+export default ElfShowPage
+
+export function getStaticProps(
+  context: NextPageContext & { params: { elfId: string } }
+) {
+  const elf = getElfById(context.params.elfId)
+  return {
+    props: { elf },
+  }
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: listElfs().map((elf) => {
+      return {
+        params: { elfId: elf.id },
+      }
+    }),
+    fallback: false,
+  }
+}
@@ -0,0 +1,106 @@
+import { Box, Heading, Flex, Text, Link } from '@theme-ui/components'
+import Image from 'next/image'
+import NextLink from 'next/link'
+import { pick } from 'ramda'
+import React from 'react'
+import Breadcrumb from '../../../components/organisms/Breadcrumb'
+import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
+import { ElfData, listElfs } from '../../../data/honkai3rd/elfs'
+
+interface ElfListPageProps {
+  elfs: Pick<ElfData, 'id' | 'name'>[]
+}
+
+const ElfListPage = ({ elfs }: ElfListPageProps) => {
+  return (
+    <Box>
+      <Honkai3rdNavigator />
+
+      <Box p={3}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: 'Honkai 3rd' },
+            { href: '/honkai3rd/elfs', label: 'ELFs' },
+          ]}
+        />
+
+        <Heading as='h1'>ELFs</Heading>
+
+        <Flex
+          sx={{
+            flexWrap: 'wrap',
+            justifyContent: 'space-around',
+          }}
+        >
+          {elfs.map((elf) => {
+            return (
+              <Box
+                key={elf.id}
+                sx={{
+                  width: '160px',
+                  padding: 2,
+                  margin: 1,
+                  borderColor: 'gray.3',
+                  borderWidth: 1,
+                  borderStyle: 'solid',
+                  borderRadius: 8,
+                  '&:hover': {
+                    borderColor: 'gray.3',
+                    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+                    transition: 'box-shadow 200ms ease-in-out',
+                  },
+                }}
+              >
+                <NextLink
+                  href={`/honkai3rd/elfs/${elf.id}`}
+                  key={elf.id}
+                  passHref={true}
+                >
+                  <Link>
+                    <Box
+                      sx={{
+                        position: 'relative',
+                        overflow: 'hidden',
+                        width: '140px',
+                        height: '140px',
+                        borderRadius: 4,
+                      }}
+                    >
+                      <Image
+                        alt={elf.name}
+                        layout='fill'
+                        objectFit='cover'
+                        src={`/assets/honkai3rd/elfs/icon-${elf.id}.png`}
+                      />
+                    </Box>
+                    <Box
+                      sx={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        width: '100%',
+                        whiteSpace: 'nowrap',
+                        textAlign: 'center',
+                      }}
+                    >
+                      <Text>{elf.name}</Text>
+                    </Box>
+                  </Link>
+                </NextLink>
+              </Box>
+            )
+          })}
+        </Flex>
+      </Box>
+    </Box>
+  )
+}
+
+export default ElfListPage
+
+export async function getStaticProps() {
+  return {
+    props: {
+      elfs: listElfs().map((elf) => pick(['id', 'name'], elf)),
+    },
+  }
+}