some content and changes

Took 3 hours 4 minutes

docs/bob/hello.md

@@ -1,7 +0,0 @@
----
-title: 'Hello'
-published: '2024-10-06'
-summary: 'petentium usu tota noluisse errem elaboraret auctor.'
----
-
-# hello

docs/bob/hey.md

@@ -1,7 +0,0 @@
----
-title: 'Hey'
-published: '2024-10-06'
-summary: 'petentium usu tota noluisse errem elaboraret auctor.'
----
-
-# hey

docs/bob/hi.md

@@ -1,7 +0,0 @@
----
-title: 'Hi'
-published: '2024-10-06'
-summary: 'petentium usu tota noluisse errem elaboraret auctor.'
----
-
-# hi

docs/intro.md

@@ -1,293 +0,0 @@
----
-title: '🚀 Introduction'
-published: '2024-10-06'
-summary: 'petentium usu tota noluisse errem elaboraret auctor.'
----
-
-# Get started with Pulse App!
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-
-# an mel dissentiunt ponderum eius dicant adhuc,
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-
-# vim an explicari eirmod pro singulis scripta iaculis fermentum.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-
-# eruditi propriae vulputate elit venenatis reprehendunt delectus.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-
-# dicunt antiopam ultricies nisl egestas voluptatibus harum,
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-
-# viverra senserit cursus theophrastus elaboraret iudicabit ligula.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-
-# posidonium dicat eum nostra auctor quaeque harum
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-
-# doctus primis disputationi atqui magnis himenaeos fastidii
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-
-# ligula cras prodesset litora ridens docendi euripidis
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-
-# efficitur detraxit detraxit fames appareat mutat elit
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-
-# donec nominavi qui dolorum adversarium eum eleifend
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-
-# nunc contentiones numquam pharetra his vero solum
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.
-petentium usu tota noluisse errem elaboraret auctor.

docs/intro.mdx

@@ -0,0 +1,30 @@
+---
+title: '🚀 Introduction'
+published: '2024-10-06'
+summary: 'petentium usu tota noluisse errem elaboraret auctor.'
+---
+
+> [!IMPORTANT]
+> These docs are currently a work in progress and are subject to change.
+
+# Pulse App
+<span className="flex gap-2 items-center select-none">
+    <Activity className="w-4 h-4 text-primary" /> <span>A lightweight service monitoring solution for tracking the availability of whatever service your heart desires!</span>
+</span>
+
+## Getting Started
+Let's get you up and running—this will only take a few minutes! Start by [creating your account](#creating-your-account) and
+making your first status page. You can do this on our cloud or on your [own instance](/self-hosting). Once done, you can add
+your services and start monitoring them. See [Next Steps](#next-steps) for more.
+
+### Creating your Account
+- First, head to our [Dashboard](https://pulseapp.cc/dashboard) and fill out the form. ![Registering](https://cdn.rainnny.club/auhNOjrcYz6u.png)
+- Next, complete the onboarding process and set up your first organization, and status page. ![Onboarding](https://cdn.rainnny.club/AfDgjHG5QTpZ.png)
+- Finally, you can [start monitoring your services](#next-steps)!
+
+### Next Steps
+#### Components
+...
+
+#### Automations
+...

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

@@ -44,7 +44,7 @@ const DocsPage = async ({
     return (
         <main className="w-full flex flex-col">
             {/* Breadcrumb */}
-            <Breadcrumb className="pt-4 select-none">
+            <Breadcrumb className="pt-4 pb-3 select-none">
                 <BreadcrumbList>
                     {splitSlug.map(
                         (part: string, index: number): ReactElement => {

src/components/docs-footer.tsx

@@ -53,7 +53,9 @@ const DocsFooter = ({
             </div>
 
             {/* Pages */}
-            <Separator className="my-4 bg-separator-gradient" />
+            {previous || next ? (
+                <Separator className="my-4 bg-separator-gradient" />
+            ) : undefined}
             <div className="flex justify-between">
                 {/* Previous */}
                 {previous && (

src/components/mdx.tsx

@@ -1,12 +1,46 @@
-import { ReactElement, ReactNode } from "react";
+import { isValidElement, ReactElement, ReactNode } from "react";
 import { MDXRemote } from "remote-mdx/rsc";
 import { cn } from "@/lib/utils";
 import remarkGfm from "remark-gfm";
+import {
+    Activity,
+    CircleAlert,
+    Lightbulb,
+    MessageSquareWarning,
+    OctagonAlert,
+    TriangleAlert,
+} from "lucide-react";
+import Link from "next/link";
+import { capitalizeWords } from "@/lib/string";
+
+const blockquoteStyles: { [key: string]: any } = {
+    NOTE: {
+        icon: <CircleAlert className="w-4 h-4" />,
+        style: "text-[#1F6FEB] border-[#1F6FEB]",
+    },
+    TIP: {
+        icon: <Lightbulb className="w-4 h-4" />,
+        style: "text-[#4A8BD5] border-[#4A8BD5]",
+    },
+    IMPORTANT: {
+        icon: <MessageSquareWarning className="w-4 h-4" />,
+        style: "text-[#8957E5] border-[#8957E5]",
+    },
+    WARNING: {
+        icon: <TriangleAlert className="w-4 h-4" />,
+        style: "text-[#9E6A03] border-[#9E6A03]",
+    },
+    CAUTION: {
+        icon: <OctagonAlert className="w-4 h-4" />,
+        style: "text-[#DA3633] border-[#DA3633]",
+    },
+};
 
 /**
  * The MDX components to style.
  */
 const components = {
+    // Headings
     h1: ({ children }: { children: ReactNode }): ReactElement => (
         <Heading as="h1" size={1} className="text-4xl">
             {children}
@@ -37,6 +71,8 @@ const components = {
             {children}
         </Heading>
     ),
+
+    // Text
     a: ({
         href,
         children,
@@ -44,19 +80,57 @@ const components = {
         href: string;
         children: ReactNode;
     }): ReactElement => (
-        <a
+        <Link
-            className="text-minecraft-green-4 cursor-pointer hover:opacity-85 transition-all transform-gpu"
+            className="text-primary cursor-pointer hover:opacity-75 transition-all transform-gpu"
             href={href}
+            draggable={false}
         >
             {children}
-        </a>
+        </Link>
     ),
     p: ({ children }: { children: ReactNode }): ReactElement => (
-        <p className="leading-4 text-zinc-300/80">{children}</p>
+        <p className="leading-5 select-none">{children}</p>
     ),
+
+    // 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}
+        />
+    ),
+
+    // Lists
     ul: ({ children }: { children: ReactNode }): ReactElement => (
-        <ul className="px-3 list-disc list-inside">{children}</ul>
+        <ul className="px-3 list-disc list-inside select-none">{children}</ul>
     ),
+
+    // Blockquotes
+    blockquote: ({ children }: { children: ReactNode }): ReactElement => {
+        const match = extractBlockQuoteText(children).match(
+            /^\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)]\s*(.*)/i
+        );
+        let style: any;
+        if (!match || !(style = blockquoteStyles[match[1]])) {
+            return <blockquote>{children}</blockquote>;
+        }
+        return (
+            <blockquote
+                className={cn(
+                    "my-2 pl-3 py-1.5 flex flex-col gap-2 border-l-[3px] select-none",
+                    style.style
+                )}
+            >
+                <h1 className="flex gap-2 items-center">
+                    {style.icon}
+                    {capitalizeWords(match[1])}
+                </h1>
+                <p className="text-foreground opacity-85">{match[2]}</p>
+            </blockquote>
+        );
+    },
 };
 
 /**
@@ -71,6 +145,8 @@ export const CustomMDX = (props: any): ReactElement => (
         components={{
             ...components,
             ...(props.components || {}),
+            Link,
+            Activity,
         }}
         options={{
             mdxOptions: {
@@ -83,6 +159,7 @@ export const CustomMDX = (props: any): ReactElement => (
 /**
  * A heading component.
  *
+ * @param as the type of heading
  * @param className the class name of the heading
  * @param size the size of the heading
  * @param children the children within the heading
@@ -104,7 +181,11 @@ const Heading = ({
     return (
         <Component
             id={id}
-            className={cn("pt-2.5 font-bold", size >= 2 && "pt-7", className)}
+            className={cn(
+                "py-3 font-bold select-none",
+                size >= 2 && "pt-7",
+                className
+            )}
         >
             {children}
         </Component>
@@ -117,3 +198,16 @@ const slugify = (text: string): string =>
         .replace(/[^\w\s-]/g, "")
         .replace(/[\s_-]+/g, "-")
         .trim();
+
+const extractBlockQuoteText = (node: ReactNode): string => {
+    if (typeof node === "string") {
+        return node;
+    }
+    if (Array.isArray(node)) {
+        return node.map(extractBlockQuoteText).join("");
+    }
+    if (isValidElement(node)) {
+        return extractBlockQuoteText(node.props.children);
+    }
+    return "";
+};

src/components/on-this-page.tsx

@@ -127,7 +127,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
 
             {/* Footer */}
             <div>
-                <Separator className="mt-1 mb-3.5" />
+                <Separator className="mt-1 mb-3.5 bg-separator-gradient" />
                 <Footer page={page} />
             </div>
         </motion.div>

src/components/theme-switcher.tsx

@@ -6,6 +6,8 @@ import { UseThemeProps } from "next-themes/dist/types";
 import { Monitor, MoonStar, Sun } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
+import SimpleTooltip from "@/components/simple-tooltip";
+import { capitalizeWords } from "@/lib/string";
 
 const themes = {
     dark: <MoonStar className="w-4 h-4" />,
@@ -31,18 +33,22 @@ const ThemeSwitcher = (): ReactElement => {
             {Object.entries(themes).map(([theme, icon]) => {
                 const active: boolean = mounted && theme === activeTheme;
                 return (
-                    <Button
+                    <SimpleTooltip
                         key={theme}
-                        className={cn(
+                        content={`${capitalizeWords(theme)} Theme`}
-                            "p-1 h-6 opacity-80 rounded-full",
-                            active &&
-                                "ring-1 bg-zinc-900 ring-white/15 opacity-100"
-                        )}
-                        variant="ghost"
-                        onClick={() => setTheme(theme)}
                     >
-                        {icon}
+                        <Button
-                    </Button>
+                            className={cn(
+                                "p-1 h-6 opacity-80 rounded-full",
+                                active &&
+                                    "ring-1 bg-zinc-900 ring-white/15 opacity-100"
+                            )}
+                            variant="ghost"
+                            onClick={() => setTheme(theme)}
+                        >
+                            {icon}
+                        </Button>
+                    </SimpleTooltip>
                 );
             })}
         </div>