feat: パンくずリストのコンポーネントを追加

Author: 3w36zj6

website/src/components/icons/ChevronRightIcon.tsx

@@ -0,0 +1,17 @@
+export const ChevronRightIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M9 6l6 6l-6 6" />
+    </svg>
+  );
+};

website/src/components/icons/HomeIcon.tsx

@@ -0,0 +1,19 @@
+export const HomeIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="icon icon-tabler icons-tabler-outline icon-tabler-home"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
+      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
+      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
+    </svg>
+  );
+};

website/src/components/icons/index.ts

@@ -1,3 +1,8 @@
+// Tabler Icons
+// https://tabler.io/icons
+export { HomeIcon } from "./HomeIcon";
+export { ChevronRightIcon } from "./ChevronRightIcon";
+
 // Simple Icons
 // https://simpleicons.org/
 export { GitHubIcon } from "./GitHubIcon";

website/src/components/templates/BaseTemplate.tsx

@@ -1,6 +1,6 @@
 import type { FC, PropsWithChildren } from "hono/jsx";
 import type { Page } from "../../types/model";
-import { SiteNoticeBanner, Footer } from "../ui/common/";
+import { SiteNoticeBanner, Footer, Breadcrumbs } from "../ui/common/";
 
 export type BaseTemplateProps = PropsWithChildren<{
   page: Page;
@@ -345,35 +345,7 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
           </nav>
 
           <main>
-            <ul class="breadcrumbs" aria-label="Breadcrumbs">
-              <li class="root">
-                <a href="/docs/">
-                  <img
-                    src="/assets/icons/16-docs-dark.svg"
-                    alt="Docs"
-                    width="16"
-                    height="16"
-                  />
-                </a>
-              </li>
-
-              {path &&
-                path.map((item, idx) => (
-                  <>
-                    <li aria-hidden="true">
-                      <img
-                        src="/assets/icons/16-arrow-right.svg"
-                        width="16"
-                        height="16"
-                        alt=""
-                      />
-                    </li>
-                    <li>
-                      <a href={item.route}>{item.title}</a>
-                    </li>
-                  </>
-                ))}
-            </ul>
+            <Breadcrumbs path={path} />
 
             {children}
 

website/src/components/ui/common/Breadcrumbs.tsx

@@ -0,0 +1,43 @@
+import type { Page } from "../../../types/model";
+import { ChevronRightIcon, HomeIcon } from "../../icons";
+
+export type BreadcrumbsProps = {
+  path: Page[];
+};
+
+export const Breadcrumbs = ({ path }: BreadcrumbsProps) => {
+  return (
+    <nav class="flex justify-between px-3.5 py-1 border border-neutral-200/60 rounded-md">
+      <ol class="inline-flex items-center mb-3 space-x-1 text-xs text-neutral-500 [&_.active-breadcrumb]:text-neutral-600 [&_.active-breadcrumb]:font-medium sm:mb-0">
+        <li class="flex items-center h-full">
+          <a href="/docs/" class="py-1 hover:text-neutral-900">
+            <div class="w-4 h-4">
+              <HomeIcon />
+            </div>
+          </a>
+        </li>
+        {path.map((item, idx) => (
+          <>
+            <div class="w-4 h-4 text-gray-400/70">
+              <ChevronRightIcon />
+            </div>
+            <li>
+              {idx === path.length - 1 ? (
+                <a class="inline-flex items-center py-1 font-semibold text-neutral-700 rounded cursor-default focus:outline-none">
+                  {item.title}
+                </a>
+              ) : (
+                <a
+                  href={item.route}
+                  class="inline-flex items-center py-1 font-normal hover:text-neutral-900 focus:outline-none"
+                >
+                  {item.title}
+                </a>
+              )}
+            </li>
+          </>
+        ))}
+      </ol>
+    </nav>
+  );
+};

website/src/components/ui/common/index.ts

@@ -1,2 +1,3 @@
 export { SiteNoticeBanner } from "./SiteNoticeBanner";
+export { Breadcrumbs, type BreadcrumbsProps } from "./Breadcrumbs";
 export { Footer } from "./Footer";