fix a few bugs

Took 17 minutes

docs/bob/hello.md

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

docs/bob/hey.md

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

docs/bob/hi.md

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

docs/intro.md

@@ -1,6 +1,6 @@
 ---
 title: '🚀 Introduction'
-published: '10-06-2024'
+published: '2024-10-06'
 summary: 'petentium usu tota noluisse errem elaboraret auctor.'
 ---
 
@@ -27,7 +27,248 @@ 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.
-# Get started with Pulse App!
+
+# 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.

package.json

@@ -20,11 +20,13 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",
     "framer-motion": "^11.11.1",
     "lucide-react": "^0.447.0",
+    "luxon": "^3.5.0",
     "next": "^15.0.0-canary.179",
     "next-themes": "^0.3.0",
     "react": "^19.0.0-rc-1460d67c-20241003",
@@ -35,13 +37,14 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@types/luxon": "^3.4.2",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.8",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
+    "typescript": "^5"
-    "eslint-config-next": "14.2.8"
   }
 }

src/app/layout.tsx

@@ -5,6 +5,7 @@ import { ThemeProvider } from "@/components/theme-provider";
 import Navbar from "@/components/navbar/navbar";
 import Sidebar from "@/components/sidebar/sidebar";
 import Footer from "@/components/footer";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 /**
  * The metadata for this app.
@@ -49,16 +50,18 @@ const RootLayout = ({
             }}
         >
             <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
-                <div className="px-7 max-w-[90rem] mx-auto min-h-screen flex flex-col">
+                <TooltipProvider delayDuration={100}>
-                    <Navbar />
+                    <div className="px-7 max-w-[90rem] mx-auto min-h-screen flex flex-col">
-                    <div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5">
+                        <Navbar />
-                        <div className="relative hidden xs:flex">
+                        <div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5">
-                            <Sidebar />
+                            <div className="relative hidden xs:flex">
+                                <Sidebar />
+                            </div>
+                            {children}
                         </div>
-                        {children}
                     </div>
-                </div>
+                    <Footer />
-                <Footer />
+                </TooltipProvider>
             </ThemeProvider>
         </body>
     </html>

src/components/docs-footer.tsx

@@ -1,10 +1,12 @@
 "use client";
 
-import { ReactElement } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
 import { Separator } from "@/components/ui/separator";
+import { DateTime } from "luxon";
+import SimpleTooltip from "@/components/simple-tooltip";
 
 const DocsFooter = ({
     pages,
@@ -14,15 +16,43 @@ const DocsFooter = ({
     const path: string = usePathname();
 
     const current: number = pages.findIndex(
-        (page: DocsContentMetadata) => `/${page.slug}` === path
+        (page: DocsContentMetadata) =>
+            (path === "/" && page.slug === "intro") || path === `/${page.slug}`
     );
     const previous: DocsContentMetadata | undefined =
         current > 0 ? pages[current - 1] : undefined;
     const next: DocsContentMetadata | undefined =
         current < pages.length - 1 ? pages[current + 1] : undefined;
 
+    const [publicationDate, setPublicationDate] = useState<string | null>(
+        DateTime.fromISO(pages[current]?.published).toRelative()
+    );
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setPublicationDate(
+                DateTime.fromISO(pages[current]?.published).toRelative()
+            );
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [current, pages]);
+
     return (
         <footer className="xs:mx-5 sm:mx-10 my-2 flex flex-col select-none transition-all transform-gpu">
+            {/* Publish Date */}
+            <div className="ml-auto pt-4">
+                <SimpleTooltip
+                    content={DateTime.fromISO(
+                        pages[current]?.published
+                    ).toLocaleString(DateTime.DATETIME_MED)}
+                >
+                    <span className="text-sm opacity-75">
+                        Published {publicationDate}
+                    </span>
+                </SimpleTooltip>
+            </div>
+
+            {/* Pages */}
             <Separator className="my-4" />
             <div className="flex justify-between">
                 {/* Previous */}

src/components/navbar/navbar.tsx

@@ -13,7 +13,7 @@ const Navbar = (): ReactElement => {
                 {/* Branding */}
                 <Link
                     className="flex gap-1 items-end hover:opacity-75 transition-all transform-gpu select-none"
-                    href="/public"
+                    href="/"
                     draggable={false}
                 >
                     <h1 className="text-lg font-semibold">docs.</h1>
@@ -30,7 +30,7 @@ const Navbar = (): ReactElement => {
                 <div className="flex gap-5 sm:gap-7 items-center transition-all transform-gpu">
                     {/* Search */}
                     <div className="hidden xs:flex">
-                        <QuickSearchDialog pages={pages} />
+                        <QuickSearchDialog pages={pages} bindKeybind />
                     </div>
 
                     {/* Social */}

src/components/navbar/search-dialog.tsx

@@ -21,14 +21,19 @@ import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.share
  */
 const QuickSearchDialog = ({
     pages,
+    bindKeybind = false,
 }: {
     pages: DocsContentMetadata[];
+    bindKeybind?: boolean;
 }): ReactElement => {
     const [open, setOpen] = useState<boolean>(false);
     const router: AppRouterInstance = useRouter();
 
     // Listen for CTRL + K keybinds to open this dialog
     useEffect(() => {
+        if (!bindKeybind) {
+            return;
+        }
         const handleKeyDown = (event: KeyboardEvent): void => {
             if ((event.ctrlKey || event.metaKey) && event.key === "k") {
                 event.preventDefault();

src/components/on-this-page.tsx

@@ -5,6 +5,8 @@ import { Bars3CenterLeftIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 import { truncateText } from "@/lib/string";
+import { useInView } from "framer-motion";
+import { motion } from "framer-motion";
 
 type Header = {
     id: string;
@@ -17,7 +19,12 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
     const [activeHeader, setActiveHeader] = useState<string | undefined>(
         undefined
     );
-    const observerRef = useRef<IntersectionObserver | undefined>(undefined);
+    const ref = useRef<HTMLDivElement>(null);
+    const inView = useInView(ref);
+
+    const observedHeaderRef = useRef<IntersectionObserver | undefined>(
+        undefined
+    );
 
     useEffect(() => {
         // Regular expression to match markdown headers
@@ -41,8 +48,8 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
 
     useEffect(() => {
         // Cleanup existing observer
-        if (observerRef.current) {
+        if (observedHeaderRef.current) {
-            observerRef.current.disconnect();
+            observedHeaderRef.current.disconnect();
         }
 
         const observer = new IntersectionObserver(
@@ -55,7 +62,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
             },
             { rootMargin: "0px 0px -80% 0px", threshold: 0.1 }
         );
-        observerRef.current = observer;
+        observedHeaderRef.current = observer;
 
         // Observe all header elements
         headers.forEach((header: Header) => {
@@ -71,7 +78,13 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
     }, [headers]);
 
     return (
-        <div className="w-44 flex flex-col gap-2 text-sm select-none">
+        <motion.div
+            ref={ref}
+            className="w-44 flex flex-col gap-2 text-sm select-none"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: inView ? 1 : 0 }}
+            transition={{ duration: 0.2 }}
+        >
             {/* Title */}
             <div className="flex gap-2.5 items-center">
                 <Bars3CenterLeftIcon className="w-5 h-5" />
@@ -112,7 +125,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
                     </li>
                 ))}
             </ul>
-        </div>
+        </motion.div>
     );
 };
 export default OnThisPage;

src/components/sidebar/sidebar-links.tsx

@@ -101,11 +101,10 @@ const CategoryItem = ({
                                 animate="open"
                                 exit="collapsed"
                                 variants={{
-                                    open: { opacity: 1, height: "auto", y: 0 },
+                                    open: { opacity: 1, height: "auto" },
                                     collapsed: {
                                         opacity: 0,
                                         height: 0,
-                                        y: -20,
                                     },
                                 }}
                                 transition={{

src/components/sidebar/sidebar.tsx

@@ -22,7 +22,7 @@ const Sidebar = (): ReactElement => (
         </div>
 
         {/* Desktop */}
-        <div className="hidden xs:flex sticky top-[4.3rem] max-h-[calc(100vh-3.5rem)] overflow-y-auto min-w-32 w-40 sm:w-52 py-5 flex-col justify-between transition-all transform-gpu">
+        <div className="hidden xs:flex sticky top-[4.3rem] max-h-[calc(100vh-3.5rem)] overflow-y-auto min-w-32 w-40 lg:w-52 py-5 flex-col justify-between transition-all transform-gpu">
             <SidebarContent />
         </div>
     </>

src/components/simple-tooltip.tsx

@@ -0,0 +1,47 @@
+import { ReactElement, ReactNode } from "react";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { SIDE_OPTIONS } from "@radix-ui/react-popper";
+
+/**
+ * The props for a simple tooltip.
+ */
+type SimpleTooltipProps = {
+    /**
+     * The content to display in the tooltip.
+     */
+    content: string | ReactElement;
+
+    /**
+     * The side to display the tooltip on.
+     */
+    side?: (typeof SIDE_OPTIONS)[number];
+
+    /**
+     * The children to render in this tooltip.
+     */
+    children: ReactNode;
+};
+
+/**
+ * A simple tooltip, this is wrapping the
+ * shadcn tooltip to make it easier to use.
+ *
+ * @return the tooltip jsx
+ */
+const SimpleTooltip = ({
+    content,
+    side,
+    children,
+}: SimpleTooltipProps): ReactElement => (
+    <Tooltip>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent className="bg-muted text-white" side={side}>
+            {content}
+        </TooltipContent>
+    </Tooltip>
+);
+export default SimpleTooltip;

src/components/ui/sheet.tsx

@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-    "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-[450ms] data-[state=open]:animate-in data-[state=closed]:animate-out",
+    "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-&lsqb;state=open&rsqb;:duration-&lsqb;450ms&rsqb; data-[state=open]:animate-in data-[state=closed]:animate-out",
     {
         variants: {
             side: {

src/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+    React.ElementRef<typeof TooltipPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+    <TooltipPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+            "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-105 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+            className
+        )}
+        {...props}
+    />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };