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/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";
 
 /**

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
-            className="m-2 my-2.5 rounded-2xl ring-1 ring-muted/45 select-none"
-            src={src}
-            alt={alt}
-            draggable={false}
-        />
+        <ImageViewer className="m-2 my-2.5">
+            <img
+                className="ring-1 ring-muted/45 rounded-2xl select-none"
+                src={src}
+                alt={alt}
+                draggable={false}
+            />
+        </ImageViewer>
     ),
 
     // Lists

src/components/simple-tooltip.tsx

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