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">

src/app/components/docs/breadcrumb.tsx

@@ -0,0 +1,48 @@
+import { ReactElement } from "react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@/app/components/ui/breadcrumb";
+import { capitalizeFirstLetter } from "@/app/common/string-utils";
+import { DocsContentMetadata } from "@/app/common/documentation";
+
+type DocsBreadcrumbProps = {
+  /**
+   * The page to render the breadcrumb for.
+   */
+  page: DocsContentMetadata;
+};
+
+export function DocsBreadcrumb({ page }: DocsBreadcrumbProps): ReactElement {
+  const slugParts: string[] = page.slug.split("/");
+  const isHome: boolean = slugParts.length == 1;
+
+  return (
+    <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>
+  );
+}

src/app/components/ui/dialog.tsx

@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-md md:max-w-2xl xl:max-w-6xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid max-w-md md:max-w-2xl xl:max-w-6xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className,
       )}
       {...props}

src/app/global-error.tsx

@@ -3,7 +3,6 @@
 import * as Sentry from "@sentry/nextjs";
 import Error from "next/error";
 import { useEffect } from "react";
-import Link from "next/link";
 import { Button } from "@/app/components/ui/button";
 
 export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {