Hello World!

src/components/organisms/Breadcrumb.tsx

@@ -0,0 +1,48 @@
+/** @jsxImportSource theme-ui */
+import { mdiChevronRight, mdiHome } from '@mdi/js'
+import Icon from '@mdi/react'
+import { NavLink, Text, Flex } from '@theme-ui/components'
+import NextLink from 'next/link'
+import React from 'react'
+
+interface BreadcrumbItem {
+  href: string
+  label: string
+}
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[]
+}
+
+const Breadcrumb = ({ items }: BreadcrumbProps) => {
+  return (
+    <Flex
+      mb={3}
+      sx={{
+        backgroundColor: 'gray.2',
+        paddingY: 2,
+        paddingX: 4,
+        borderRadius: 8,
+        alignItems: 'center',
+      }}
+    >
+      <NextLink passHref href='/'>
+        <NavLink sx={{ display: 'flex' }}>
+          <Icon size={0.8} path={mdiHome} />
+        </NavLink>
+      </NextLink>
+      {items.map((item) => {
+        return (
+          <React.Fragment key={item.href}>
+            <Icon size={0.8} path={mdiChevronRight} />
+            <NextLink passHref href={item.href}>
+              <NavLink>{item.label}</NavLink>
+            </NextLink>
+          </React.Fragment>
+        )
+      })}
+    </Flex>
+  )
+}
+
+export default Breadcrumb

src/components/organisms/Honkai3rdNavigator.tsx

@@ -0,0 +1,45 @@
+/** @jsxImportSource theme-ui */
+import { NavLink, Heading, Flex } from '@theme-ui/components'
+import NextLink from 'next/link'
+
+const Honkai3rdNavigator = () => {
+  return (
+    <Flex mx={3} sx={{ alignItems: 'center' }}>
+      <Flex sx={{ alignItems: 'center', height: 50 }} mr={3}>
+        <Heading margin={0}>
+          <NextLink href='/' passHref>
+            <NavLink mr={2}>Abyss Lab</NavLink>
+          </NextLink>
+          :
+          <NextLink href='/honkai3rd' passHref>
+            <NavLink ml={2}>Honkai 3rd</NavLink>
+          </NextLink>
+        </Heading>
+      </Flex>
+      <Flex sx={{ height: 40, alignItems: 'center' }}>
+        <NextLink href='/honkai3rd/battlesuits' passHref>
+          <NavLink mr={3} sx={{ fontFamily: 'monospace' }}>
+            Battlesuits
+          </NavLink>
+        </NextLink>
+        <NextLink href='/honkai3rd/weapons' passHref>
+          <NavLink mr={3} sx={{ fontFamily: 'monospace' }}>
+            Weapons
+          </NavLink>
+        </NextLink>
+        <NextLink href='/honkai3rd/stigmata' passHref>
+          <NavLink mr={3} sx={{ fontFamily: 'monospace' }}>
+            Stigmata
+          </NavLink>
+        </NextLink>
+        <NextLink href='/honkai3rd/elfs' passHref>
+          <NavLink mr={3} sx={{ fontFamily: 'monospace' }}>
+            ELFs
+          </NavLink>
+        </NextLink>
+      </Flex>
+    </Flex>
+  )
+}
+
+export default Honkai3rdNavigator

src/components/organisms/RootNavigator.tsx

@@ -0,0 +1,27 @@
+/** @jsxImportSource theme-ui */
+import { NavLink, Heading, Flex } from '@theme-ui/components'
+import NextLink from 'next/link'
+
+const RootNavigator = () => {
+  return (
+    <Flex mx={3} sx={{ alignItems: 'center' }}>
+      <Flex sx={{ alignItems: 'center', height: 50 }} mr={3}>
+        <Heading margin={0}>
+          <NextLink href='/' passHref>
+            <NavLink>Abyss Lab</NavLink>
+          </NextLink>
+        </Heading>
+      </Flex>
+      <Flex sx={{ height: 40, alignItems: 'center' }}>
+        <NextLink href='/genshin' passHref>
+          <NavLink mr={3}>Genshin</NavLink>
+        </NextLink>
+        <NextLink href='/honkai3rd' passHref>
+          <NavLink mr={3}>Honkai 3rd</NavLink>
+        </NextLink>
+      </Flex>
+    </Flex>
+  )
+}
+
+export default RootNavigator