zudoku 0.0.0-ec30b50 → 0.0.0-ee328ec

package/src/lib/components/Footer.tsx

@@ -0,0 +1,139 @@
+import { ExternalLink as ExternalLinkIcon } from "lucide-react";
+import type { CSSProperties, ReactNode } from "react";
+import type { FooterSocialIcons } from "../../config/validators/common.js";
+import { cn } from "../util/cn.js";
+import { AnchorLink } from "./AnchorLink.js";
+import { useZudoku } from "./index.js";
+import { Slotlet } from "./SlotletProvider.js";
+
+const SocialIcon = ({
+  icon,
+}: {
+  icon: (typeof FooterSocialIcons)[number] | ReactNode;
+}) => {
+  if (typeof icon === "string") {
+    return (
+      <img
+        src={`https://cdn.simpleicons.org/${icon}/000000/ffffff`}
+        className="size-5"
+        alt={icon}
+      />
+    );
+  }
+  return icon;
+};
+
+const isExternalUrl = (href: string) => /^https?:/.test(href);
+
+export const Footer = () => {
+  const { page } = useZudoku();
+  const footer = page?.footer;
+
+  if (!footer) return null;
+
+  return (
+    <footer className="border-t bg-background">
+      <div className="mx-auto max-w-screen-2xl px-4 lg:px-8 py-8 pt-20">
+        <div
+          className={cn("flex flex-row gap-8", {
+            "justify-center": !footer.position || footer.position === "center",
+            "justify-start": footer.position === "start",
+            "justify-end": footer.position === "end",
+          })}
+        >
+          <Slotlet name="footer-before" />
+          {footer.columns && (
+            <div
+              className="w-full md:max-w-screen-md grid grid-cols-[1fr_1fr] gap-8 md:grid-cols-[repeat(var(--columns),minmax(0,1fr))]"
+              style={{ "--columns": footer.columns.length } as CSSProperties}
+            >
+              {footer.columns.map((column) => (
+                <div
+                  className={cn({
+                    "justify-self-center":
+                      !column.position || column.position === "center",
+                    "justify-self-start": column.position === "start",
+                    "justify-self-end": column.position === "end",
+                  })}
+                  key={column.title}
+                >
+                  <span className="text-sm font-semibold">{column.title}</span>
+                  <ul className="mt-4 space-y-2">
+                    {column.links.map((link, i) => {
+                      const className =
+                        "flex flex-row gap-1 items-center text-sm text-muted-foreground hover:text-accent-foreground";
+
+                      return (
+                        <li key={link.href + i}>
+                          {isExternalUrl(link.href) ? (
+                            <a
+                              href={link.href}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className={className}
+                            >
+                              <span>{link.label}</span>
+                              <ExternalLinkIcon size={12} />
+                            </a>
+                          ) : (
+                            <AnchorLink
+                              to={link.href + i}
+                              className={className}
+                            >
+                              <span>{link.label}</span>
+                            </AnchorLink>
+                          )}
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          )}
+          <Slotlet name="footer-after" />
+        </div>
+        <div
+          className={cn(
+            "flex items-center justify-between",
+            footer.columns && "border-t mt-8 pt-8",
+          )}
+        >
+          {footer.logo && (
+            <>
+              <img
+                src={footer.logo.src.light}
+                alt={footer.logo.alt}
+                className="w-8 dark:hidden"
+                style={{ width: footer.logo.width }}
+              />
+              <img
+                src={footer.logo.src.dark}
+                alt={footer.logo.alt}
+                className="w-8 hidden dark:block"
+                style={{ width: footer.logo.width }}
+              />
+            </>
+          )}
+          {footer.copyright && (
+            <p className="text-sm text-muted-foreground">{footer.copyright}</p>
+          )}
+          <div className="flex items-center gap-2">
+            {footer.social?.map((social) => (
+              <a
+                key={social.href}
+                href={social.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-auto gap-2 flex text-muted-foreground hover:text-accent-foreground"
+              >
+                <SocialIcon icon={social.icon} />
+                {social.label}
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};

package/src/lib/components/Header.tsx

@@ -3,7 +3,10 @@ import { Link } from "react-router";
 import { Button } from "zudoku/ui/Button.js";
 import { Skeleton } from "zudoku/ui/Skeleton.js";
 import { useAuth } from "../authentication/hook.js";
-import { isProfileMenuPlugin, ProfileNavigationItem } from "../core/plugins.js";
+import {
+  isProfileMenuPlugin,
+  type ProfileNavigationItem,
+} from "../core/plugins.js";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -66,7 +69,7 @@ export const Header = memo(function HeaderInner() {
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
       <Banner />
       <div className="border-b">
-        <div className="max-w-screen-2xl border-l border-r mx-auto grid grid-cols-[1fr_auto] lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center px-4 lg:px-12 h-[--top-header-height]">
+        <div className="max-w-screen-2xl mx-auto flex relative items-center justify-between px-4 lg:px-8 h-[--top-header-height] border-transparent">
           <div className="flex">
             <Link to="/">
               <div className="flex items-center gap-3.5">
@@ -102,17 +105,18 @@ export const Header = memo(function HeaderInner() {
                     />
                   </>
                 )}
-                <span className="font-bold text-2xl text-foreground/85 tracking-wide">
+                <span className="font-semibold text-2xl">
                   {page?.pageTitle}
                 </span>
               </div>
             </Link>
           </div>
-          <div className="grid grid-cols-1 lg:grid-cols-[--sidecar-grid-cols] items-center gap-8">
-            <div className="w-full justify-center hidden lg:flex">
-              <Search />
-            </div>
 
+          <div className="absolute inset-x-0 justify-center items-center hidden lg:flex w-full pointer-events-none">
+            <Search className="pointer-events-auto" />
+          </div>
+
+          <div className="flex items-center gap-8">
             <MobileTopNavigation />
             <div className="hidden lg:flex items-center justify-self-end text-sm gap-2">
               <Slotlet name="head-navigation-start" />
@@ -177,8 +181,8 @@ export const Header = memo(function HeaderInner() {
           </div>
         </div>
       </div>
-      <div className="border-b">
-        <div className="max-w-screen-2xl mx-auto border-l border-r">
+      <div className="border-b hidden lg:block">
+        <div className="max-w-screen-2xl mx-auto border-transparent">
           <Slotlet name="top-navigation-before" />
           <TopNavigation />
           <Slotlet name="top-navigation-after" />

package/src/lib/components/Heading.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
 import { useRegisterAnchorElement } from "./context/ViewportAnchorContext.js";
 
 import { cva, type VariantProps } from "class-variance-authority";
@@ -38,7 +38,7 @@ const getComponent = (level: number) => {
   }
 };
 
-export type HeadingProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+export type HeadingProps = HTMLAttributes<HTMLHeadingElement> &
   VariantProps<typeof heading> & {
     children: ReactNode;
     className?: string;
@@ -66,7 +66,7 @@ export const Heading = ({
       {id && (
         <a
           href={`#${id}`}
-          className="before:content-['#'] no-underline absolute text-primary -left-[0.8em] pr-2.5 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity duration-200"
+          className="before:content-['#'] no-underline absolute text-primary -start-[0.8em] pe-2.5 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity duration-200"
           aria-label={`Link to ${id}`}
         >
           {/* Zero width space */}

package/src/lib/components/InlineCode.tsx

@@ -1,29 +1,26 @@
 import type { ReactNode } from "react";
+import { SelectOnClick } from "../plugins/openapi/components/SelectOnClick.js";
 import { cn } from "../util/cn.js";
 
 export const InlineCode = ({
   className,
   children,
   selectOnClick,
+  onClick,
 }: {
   className?: string;
   children: ReactNode;
   selectOnClick?: boolean;
+  onClick?: () => void;
 }) => (
-  <code
-    onClick={(e) => {
-      if (!selectOnClick) return;
-      const selection = window.getSelection();
-      const range = document.createRange();
-      range.selectNodeContents(e.currentTarget);
-      selection?.removeAllRanges();
-      selection?.addRange(range);
-    }}
-    className={cn(
-      "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 whitespace-nowrap",
-      className,
-    )}
-  >
-    {children}
-  </code>
+  <SelectOnClick asChild enabled={selectOnClick} onClick={onClick}>
+    <code
+      className={cn(
+        "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 [overflow-wrap:anywhere]",
+        className,
+      )}
+    >
+      {children}
+    </code>
+  </SelectOnClick>
 );

package/src/lib/components/Layout.tsx

@@ -1,62 +1,48 @@
 import { Helmet } from "@zudoku/react-helmet-async";
-import { PanelLeftIcon } from "lucide-react";
-import { Suspense, useEffect, useRef, useState, type ReactNode } from "react";
-import { Outlet, useLocation, useNavigation } from "react-router";
-import { useSpinDelay } from "spin-delay";
-import { Drawer, DrawerTrigger } from "../ui/Drawer.js";
+import { Suspense, useEffect, type ReactNode } from "react";
+import { Outlet, useLocation } from "react-router";
 import { cn } from "../util/cn.js";
+import { joinUrl } from "../util/joinUrl.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
-import { useViewportAnchor } from "./context/ViewportAnchorContext.js";
 import { useZudoku } from "./context/ZudokuContext.js";
+import { Footer } from "./Footer.js";
 import { Header } from "./Header.js";
-import { Sidebar } from "./navigation/Sidebar.js";
+import { Main } from "./Main.js";
 import { Slotlet } from "./SlotletProvider.js";
 import { Spinner } from "./Spinner.js";
 
 const LoadingFallback = () => (
-  <main className="grid h-[calc(100vh-var(--header-height))] place-items-center">
+  <main className="col-span-full row-span-full grid place-items-center">
     <Spinner />
   </main>
 );
 
 export const Layout = ({ children }: { children?: ReactNode }) => {
+  const { meta, authentication, options } = useZudoku();
   const location = useLocation();
-  const { setActiveAnchor } = useViewportAnchor();
-  const { meta, authentication } = useZudoku();
 
   useScrollToAnchor();
   useScrollToTop();
 
-  const previousLocationPath = useRef(location.pathname);
-
   useEffect(() => {
     // Initialize the authentication plugin
     authentication?.onPageLoad?.();
   }, [authentication]);
 
-  useEffect(() => {
-    // always reset on location change
-    if (location.pathname !== previousLocationPath.current) {
-      setActiveAnchor("");
-    }
-    previousLocationPath.current = location.pathname;
-  }, [location.pathname, setActiveAnchor]);
-
-  // Page transition is happening: https://reactrouter.com/start/framework/pending-ui#global-pending-navigation
-  const isNavigating = Boolean(useNavigation().location);
-  const showSpinner = useSpinDelay(isNavigating, {
-    delay: 300,
-    minDuration: 500,
-  });
-  const [isDrawerOpen, setDrawerOpen] = useState(false);
-
   return (
     <>
-      {import.meta.env.MODE === "standalone" && (
-        <style>{`:root { --top-nav-height: 0px; }`}</style>
-      )}
       <Helmet titleTemplate={meta?.title}>
+        {options.canonicalUrlOrigin && (
+          <link
+            rel="canonical"
+            href={joinUrl(
+              options.canonicalUrlOrigin,
+              options.basePath,
+              location.pathname,
+            )}
+          />
+        )}
         {meta?.description && (
           <meta name="description" content={meta.description} />
         )}
@@ -66,45 +52,18 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       <Header />
       <Slotlet name="layout-after-head" />
 
-      <div className="w-full max-w-screen-2xl mx-auto px-4 lg:px-12 border-l border-r">
-        {showSpinner ? (
-          <LoadingFallback />
-        ) : (
-          <Suspense fallback={<LoadingFallback />}>
-            <Drawer
-              direction="left"
-              open={isDrawerOpen}
-              onOpenChange={(open) => setDrawerOpen(open)}
-            >
-              <Sidebar onRequestClose={() => setDrawerOpen(false)} />
-              <div
-                className={cn(
-                  "lg:hidden -mx-10 px-10 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 left-0 right-0 border-b",
-                  "peer-data-[navigation=false]:hidden",
-                )}
-              >
-                <DrawerTrigger className="flex items-center gap-2">
-                  <PanelLeftIcon size={16} strokeWidth={1.5} />
-                  <span className="text-sm">Menu</span>
-                </DrawerTrigger>
-              </div>
-              <main
-                className={cn(
-                  "h-full dark:border-white/10 translate-x-0",
-                  "lg:overflow-visible",
-                  // This works in tandem with the `SidebarWrapper` component
-                  "lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]",
-                  "lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] lg:peer-data-[navigation=true]:pl-12",
-                )}
-              >
-                <Slotlet name="zudoku-before-content" />
-                {children ?? <Outlet />}
-                <Slotlet name="zudoku-after-content" />
-              </main>
-            </Drawer>
-          </Suspense>
+      <div
+        className={cn(
+          "grid max-w-screen-2xl w-full lg:mx-auto",
+          "[&:has(>:only-child)]:grid-rows-1 grid-rows-[0_min-content_1fr] lg:grid-rows-[min-content_1fr]",
+          "grid-cols-1 lg:grid-cols-[var(--side-nav-width)_1fr]",
         )}
+      >
+        <Suspense fallback={<LoadingFallback />}>
+          <Main>{children ?? <Outlet />}</Main>
+        </Suspense>
       </div>
+      <Footer />
     </>
   );
 };

package/src/lib/components/Main.tsx

@@ -0,0 +1,51 @@
+import { PanelLeftIcon } from "lucide-react";
+import { type PropsWithChildren, useState } from "react";
+import { useNavigation } from "react-router";
+import { Drawer, DrawerTrigger } from "zudoku/ui/Drawer.js";
+import { cn } from "../util/cn.js";
+import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
+import { Sidebar } from "./navigation/Sidebar.js";
+import { Slotlet } from "./SlotletProvider.js";
+
+export const Main = ({ children }: PropsWithChildren) => {
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+  const { sidebar } = useCurrentNavigation();
+  const hasSidebar = sidebar.length > 0;
+  const isNavigating = useNavigation().state === "loading";
+  const { options } = useZudoku();
+
+  return (
+    <Drawer
+      direction={options.page?.dir === "rtl" ? "right" : "left"}
+      open={isDrawerOpen}
+      onOpenChange={(open) => setDrawerOpen(open)}
+    >
+      {hasSidebar && (
+        <Sidebar
+          onRequestClose={() => setDrawerOpen(false)}
+          sidebar={sidebar}
+        />
+      )}
+      {hasSidebar && (
+        <div className="lg:hidden -mx-4 px-4 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 start-0 end-0 border-b">
+          <DrawerTrigger className="flex items-center gap-2 px-4">
+            <PanelLeftIcon size={16} strokeWidth={1.5} />
+            <span className="text-sm">Menu</span>
+          </DrawerTrigger>
+        </div>
+      )}
+      <main
+        data-pagefind-body
+        className={cn(
+          "px-4 lg:pe-8 lg:px-8",
+          !hasSidebar && "col-span-full",
+          isNavigating && "animate-pulse",
+        )}
+      >
+        <Slotlet name="zudoku-before-content" />
+        {children}
+        <Slotlet name="zudoku-after-content" />
+      </main>
+    </Drawer>
+  );
+};

package/src/lib/components/MobileTopNavigation.tsx

@@ -9,18 +9,19 @@ import {
   DrawerTrigger,
 } from "../ui/Drawer.js";
 import { useZudoku } from "./context/ZudokuContext.js";
+import { PoweredByZudoku } from "./navigation/PoweredByZudoku.js";
 import { Search } from "./Search.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
-import { isHiddenItem, TopNavItem } from "./TopNavigation.js";
+import { isHiddenItem, PageProgress, TopNavItem } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
-  const { topNavigation } = useZudoku();
+  const { topNavigation, options } = useZudoku();
   const { isAuthenticated } = useAuth();
   const [drawerOpen, setDrawerOpen] = useState(false);
 
   return (
     <Drawer
-      direction="right"
+      direction={options.page?.dir === "rtl" ? "left" : "right"}
       open={drawerOpen}
       onOpenChange={(open) => setDrawerOpen(open)}
     >
@@ -28,28 +29,36 @@ export const MobileTopNavigation = () => {
         <DrawerTrigger className="lg:hidden">
           <MenuIcon size={22} />
         </DrawerTrigger>
+        <PageProgress />
       </div>
       <DrawerContent
-        className="lg:hidden h-[100dvh] right-0 left-auto w-[320px] rounded-none"
+        className="lg:hidden h-[100dvh] end-0 start-auto w-[320px] rounded-none"
         aria-describedby={undefined}
       >
-        <div className="p-4 overflow-y-auto overscroll-none">
-          <VisuallyHidden>
-            <DrawerTitle>Navigation</DrawerTitle>
-          </VisuallyHidden>
-          <Search className="flex p-4" />
-          <ul className="flex flex-col items-center gap-4 p-4">
-            <li>
-              <ThemeSwitch />
-            </li>
-            {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
-              <li key={item.label}>
-                <button onClick={() => setDrawerOpen(false)}>
-                  <TopNavItem {...item} />
-                </button>
+        <div className="p-4 overflow-y-auto overscroll-none h-full flex flex-col justify-between">
+          <div>
+            <VisuallyHidden>
+              <DrawerTitle>Navigation</DrawerTitle>
+            </VisuallyHidden>
+            <Search className="flex p-4" />
+            <ul className="flex flex-col items-center gap-4 p-4">
+              <li>
+                <ThemeSwitch />
               </li>
-            ))}
-          </ul>
+              {topNavigation
+                .filter(isHiddenItem(isAuthenticated))
+                .map((item) => (
+                  <li key={item.label}>
+                    <button type="button" onClick={() => setDrawerOpen(false)}>
+                      <TopNavItem {...item} />
+                    </button>
+                  </li>
+                ))}
+            </ul>
+          </div>
+          {options.page?.showPoweredBy !== false && (
+            <PoweredByZudoku className="flex-grow-0 justify-center gap-1" />
+          )}
         </div>
       </DrawerContent>
     </Drawer>

package/src/lib/components/Pagination.tsx

@@ -0,0 +1,50 @@
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { Link } from "react-router";
+import { cn } from "../util/cn.js";
+import { Button } from "./index.js";
+
+export const Pagination = ({
+  prev,
+  next,
+  className,
+}: {
+  prev: { to: string; label: string } | undefined;
+  next: { to: string; label: string } | undefined;
+  className?: string;
+}) => {
+  const linkClass =
+    "group transition-all p-5 space-x-1 rtl:space-x-reverse transition-all hover:text-foreground";
+
+  return (
+    <div
+      className={cn(
+        "flex -mx-4 text-muted-foreground font-semibold",
+        prev ? "justify-between" : "justify-end",
+        className,
+      )}
+    >
+      {prev && (
+        <Button variant="ghost" asChild>
+          <Link to={prev.to} relative="path" className={linkClass}>
+            <ArrowLeftIcon
+              className="ltr:group-hover:motion-safe:animate-bounce-x-start rtl:rotate-180"
+              size={12}
+            />
+            <span className="truncate">{prev.label}</span>
+          </Link>
+        </Button>
+      )}
+      {next && (
+        <Button variant="ghost" asChild>
+          <Link to={next.to} relative="path" className={linkClass}>
+            <span className="truncate ">{next.label}</span>
+            <ArrowRightIcon
+              className="ltr:group-hover:motion-safe:animate-bounce-x-end rtl:rotate-180"
+              size={12}
+            />
+          </Link>
+        </Button>
+      )}
+    </div>
+  );
+};

package/src/lib/components/Search.tsx

@@ -1,6 +1,8 @@
 import { SearchIcon } from "lucide-react";
 import { Suspense, useCallback, useEffect, useState } from "react";
 import { isSearchPlugin } from "../core/plugins.js";
+import { detectOS } from "../util/detectOS.js";
+import { ClientOnly } from "./ClientOnly.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 
 export const Search = ({ className }: { className?: string }) => {
@@ -45,9 +47,9 @@ export const Search = ({ className }: { className?: string }) => {
           <SearchIcon size={14} />
           Search
         </div>
-        <kbd className="absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[11px] font-medium opacity-100 sm:flex">
-          ⌘K
-        </kbd>
+        <ClientOnly>
+          <KbdShortcut />
+        </ClientOnly>
       </button>
       <Suspense fallback={null}>
         {searchPlugin.renderSearch({
@@ -58,3 +60,12 @@ export const Search = ({ className }: { className?: string }) => {
     </div>
   );
 };
+
+const KbdShortcut = () => {
+  const os = detectOS();
+  return (
+    <kbd className="absolute end-1.5 hidden h-5 select-none items-center gap-1 rounded-sm border bg-muted px-1.5 font-mono text-[11px] font-medium opacity-100 sm:flex">
+      {os === "macOS" ? "⌘" : "Ctrl"}+K
+    </kbd>
+  );
+};

package/src/lib/components/ThemeSwitch.tsx

@@ -1,26 +1,46 @@
-import { MoonStarIcon, SunIcon } from "lucide-react";
+import { MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { Button } from "zudoku/ui/Button.js";
+import { cn } from "../util/cn.js";
 import { ClientOnly } from "./ClientOnly.js";
 
 export const ThemeSwitch = () => {
   const { resolvedTheme, setTheme } = useTheme();
-  const ThemeIcon = resolvedTheme === "dark" ? MoonStarIcon : SunIcon;
 
   return (
     <ClientOnly fallback={<Button variant="ghost" size="icon" />}>
-      <Button
-        variant="ghost"
-        size="icon"
+      <button
+        type="button"
+        className="flex rounded-full border p-0.5 gap-0.5 group"
+        onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
         aria-label={
           resolvedTheme === "dark"
             ? "Switch to light mode"
             : "Switch to dark mode"
         }
-        onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
       >
-        <ThemeIcon size={18} />
-      </Button>
+        <div
+          className={cn(
+            "border border-transparent rounded-full p-0.5 [&>svg>circle]:transition-colors [&>svg>path]:transition-transform transition-all [&>svg>path]:duration-200 [&>svg>circle]:duration-500 [&>svg>circle]:fill-transparent",
+            resolvedTheme === "light" && "border-border bg-muted",
+            resolvedTheme === "dark" &&
+              "group-hover:[&>svg>path]:scale-110 group-hover:[&>svg>path]:-translate-x-[1px] group-hover:[&>svg>path]:-translate-y-[1px] group-hover:rotate-[15deg] ",
+          )}
+        >
+          <SunIcon size={16} />
+        </div>
+        <div
+          className={cn(
+            "border border-transparent rounded-full p-0.5 transition-transform transform-gpu duration-500",
+            resolvedTheme === "dark" &&
+              "border-border bg-muted [&>svg>path]:fill-white [&>svg>path]:stroke-transparent",
+            resolvedTheme === "light" &&
+              "group-hover:rotate-[-10deg] [&>svg>path]:stroke-currentColor",
+          )}
+        >
+          <MoonIcon size={16} />
+        </div>
+      </button>
     </ClientOnly>
   );
 };