image viewer component

Took 19 minutes

docs/👨🏼‍💻 Self Hosting/docker.mdx

@@ -5,5 +5,5 @@ summary: 'petentium usu tota noluisse errem elaboraret auctor.'
 order: 4
 ---
 
-# Deploying on Docker
+# 🐋 Deploying on Docker
 ...

docs/🖥️ Service Monitoring/components.mdx

@@ -5,5 +5,5 @@ summary: 'petentium usu tota noluisse errem elaboraret auctor.'
 order: 2
 ---
 
-# Components
+# 🧩 Components
 ...

docs/🖥️ Service Monitoring/supported-services.mdx

@@ -5,5 +5,5 @@ summary: 'petentium usu tota noluisse errem elaboraret auctor.'
 order: 3
 ---
 
-# Supported Services
+# ✔️ Supported Services
 Below is a list of all the services that are currently supported by Pulse App. Are we missing a service? Please [open an issue](https://git.rainnny.club/PulseApp/API/issues)!

src/app/[[...slug]]/page.tsx

@@ -13,7 +13,6 @@ import { capitalizeWords } from "@/lib/string";
 import { Metadata } from "next";
 import Embed from "@/components/embed";
 import DocsFooter from "@/components/docs-footer";
-import { cn } from "@/lib/utils";
 import OnThisPage from "@/components/on-this-page";
 
 /**
@@ -47,18 +46,15 @@ const DocsPage = async ({
             {/* Breadcrumb */}
             <Breadcrumb className="pt-4 pb-3 select-none">
                 <BreadcrumbList>
-                    {splitSlug.map(
+                    {splitSlug
-                        (part: string, index: number): ReactElement => {
+                        .slice(0, -1)
-                            const active: boolean =
+                        .map((part: string, index: number): ReactElement => {
-                                index === splitSlug.length - 1;
                             const slug: string = splitSlug
-                                .slice(1, index + 1)
+                                .slice(1, index + 2) // Include one more to account for the index shift
                                 .join("/");
                             return (
                                 <div className="flex items-center" key={part}>
-                                    <BreadcrumbItem
+                                    <BreadcrumbItem>
-                                        className={cn(active && "text-primary")}
-                                    >
                                         <BreadcrumbLink
                                             href={slug}
                                             draggable={false}
@@ -66,13 +62,17 @@ const DocsPage = async ({
                                             {capitalizeWords(part)}
                                         </BreadcrumbLink>
                                     </BreadcrumbItem>
-                                    {index < splitSlug.length - 1 && (
+                                    {index < splitSlug.length - 1 && ( // Adjusted to avoid separator after the last breadcrumb
                                         <BreadcrumbSeparator className="pl-1.5" />
                                     )}
                                 </div>
                             );
-                        }
+                        })}
-                    )}
+                    <BreadcrumbItem className="text-primary">
+                        <BreadcrumbLink href="#" draggable={false}>
+                            {page.title}{" "}
+                        </BreadcrumbLink>
+                    </BreadcrumbItem>
                 </BreadcrumbList>
             </Breadcrumb>
 

src/components/image-viewer.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { ReactElement, ReactNode } from "react";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+type ImageViewerProps = {
+    className?: string | undefined;
+    children: ReactNode;
+};
+
+const ImageViewer = ({
+    className,
+    children,
+}: ImageViewerProps): ReactElement => {
+    return (
+        <Dialog>
+            <DialogTrigger
+                className={cn(
+                    "hover:scale-[1.005] transition-all transform-gpu",
+                    className
+                )}
+            >
+                {children}
+            </DialogTrigger>
+            <DialogContent className="p-0 min-w-[20rem] max-w-screen-xl">
+                {children}
+            </DialogContent>
+        </Dialog>
+    );
+};
+export default ImageViewer;

src/components/mdx.tsx

@@ -12,6 +12,7 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 import { capitalizeWords } from "@/lib/string";
+import ImageViewer from "@/components/image-viewer";
 
 const blockquoteStyles: { [key: string]: any } = {
     NOTE: {
@@ -94,12 +95,14 @@ const components = {
 
     // Media
     img: ({ src, alt }: { src: string; alt: string }): ReactElement => (
-        <img
+        <ImageViewer className="m-2 my-2.5">
-            className="m-2 my-2.5 rounded-2xl ring-1 ring-muted/45 select-none"
+            <img
-            src={src}
+                className="ring-1 ring-muted/45 rounded-2xl select-none"
-            alt={alt}
+                src={src}
-            draggable={false}
+                alt={alt}
-        />
+                draggable={false}
+            />
+        </ImageViewer>
     ),
 
     // Lists

src/components/simple-tooltip.tsx

@@ -1,9 +1,5 @@
 import { ReactElement, ReactNode } from "react";
-import {
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { SIDE_OPTIONS } from "@radix-ui/react-popper";
 
 /**