Hello World!

2021-12-20 00:57:38 +09:00
commit 61bf657f23
1744 changed files with 22024 additions and 0 deletions
@@ -0,0 +1,114 @@
+/** @jsxImportSource theme-ui */
+import { Text, NavLink, Box, Heading, Flex, Link } from '@theme-ui/components'
+import NextLink from 'next/link'
+import Breadcrumb from '../../../components/organisms/Breadcrumb'
+import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
+import { StigmataData, listStigmata } from '../../../data/honkai3rd/stigmata'
+
+interface StigmataListPageProps {
+  stigmataDataList: StigmataData[]
+}
+
+const StigmataListPage = ({ stigmataDataList }: StigmataListPageProps) => {
+  return (
+    <Box>
+      <Honkai3rdNavigator />
+
+      <Box p={3}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: 'Honkai 3rd' },
+            { href: '/honkai3rd/stigmata', label: 'Stigmata' },
+          ]}
+        />
+
+        <Heading as='h1'>Stigmata</Heading>
+
+        <Flex
+          sx={{
+            flexWrap: 'wrap',
+            justifyContent: 'space-around',
+          }}
+        >
+          {stigmataDataList.map((stigmata) => {
+            return (
+              <Box
+                key={stigmata.id}
+                sx={{
+                  width: '120px',
+                  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/stigmata/${stigmata.id}`}
+                  key={stigmata.id}
+                  passHref={true}
+                >
+                  <Link>
+                    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                      <div
+                        className='rounded'
+                        style={{
+                          width: '100px',
+                          height: '100px',
+                          position: 'relative',
+                          overflow: 'hidden',
+                          borderRadius: 4,
+                        }}
+                      >
+                        <img
+                          style={{
+                            position: 'absolute',
+                            left: '50%',
+                            top: '50%',
+                            transform: 'translateY(-50%) translateX(-50%)',
+                          }}
+                          height='100'
+                          src={`/assets/honkai3rd/stigmata/icon-${stigmata.id}.png`}
+                        />
+                      </div>
+                    </Box>
+                    <Box
+                      sx={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        width: '100%',
+                        whiteSpace: 'nowrap',
+                        textAlign: 'center',
+                      }}
+                    >
+                      <Text>{stigmata.name}</Text>
+                    </Box>
+                    <Box sx={{ fontSize: 1, textAlign: 'center' }}>
+                      {'⭐'.repeat(stigmata.rarity)}
+                    </Box>
+                  </Link>
+                </NextLink>
+              </Box>
+            )
+          })}
+        </Flex>
+      </Box>
+    </Box>
+  )
+}
+
+export default StigmataListPage
+
+export async function getStaticProps() {
+  return {
+    props: {
+      stigmataDataList: listStigmata(),
+    },
+  }
+}