change docs and docs page

src/app/(pages)/docs/[[...slug]]/page.tsx

@@ -3,16 +3,9 @@ import { Metadata } from "next";
 import { generateEmbed } from "@/app/common/embed";
 import { Title } from "@/app/components/title";
 import { DocsContentMetadata, getDocContent, getDocsContent } from "@/app/common/documentation";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbSeparator,
-} from "@/app/components/ui/breadcrumb";
-import { capitalizeFirstLetter } from "@/app/common/string-utils";
 import { notFound } from "next/navigation";
 import { GithubLink } from "@/app/components/docs/github-link";
+import { DocsBreadcrumb } from "@/app/components/docs/breadcrumb";
 
 type DocumentationPageParams = {
   params: {
@@ -56,36 +49,11 @@ export default function Page({ params: { slug } }: DocumentationPageParams) {
     return notFound();
   }
 
-  const slugParts: string[] = page.slug.split("/");
-  const isHome: boolean = slugParts.length == 1;
-
   return (
     <div className="w-full h-full px-4 flex flex-col gap-2">
       <div className="flex justify-between items-center">
         {/* The breadcrumb for the documentation page */}
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink href={`/docs`}>Home</BreadcrumbLink>
-            </BreadcrumbItem>
-            {!isHome &&
-              slugParts.map((slug, index, array) => {
-                const path: string = array.slice(0, index + 1).join("/");
-                const name: string = slug.includes("-")
-                  ? slug.split("-").map(capitalizeFirstLetter).join(" ")
-                  : capitalizeFirstLetter(slug);
-
-                return (
-                  <div key={slug} className="flex items-center ">
-                    <BreadcrumbSeparator className="pr-1.5" />
-                    <BreadcrumbItem>
-                      <BreadcrumbLink href={`/docs/${path}`}>{capitalizeFirstLetter(name)}</BreadcrumbLink>
-                    </BreadcrumbItem>
-                  </div>
-                );
-              })}
-          </BreadcrumbList>
-        </Breadcrumb>
+        <DocsBreadcrumb page={page} />
 
         {/* The Git link for the documentation page */}
         <div className="flex flex-row gap-2 items-center">