Merge remote-tracking branch 'origin' into cursed

app/Providers.tsx

@@ -0,0 +1,10 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { RouterProvider } from "react-aria-components"
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+
+  return <RouterProvider navigate={router.push}>{children}</RouterProvider>
+}

app/components/NavMenu.tsx

@@ -0,0 +1,33 @@
+import { Menu, MenuItem, MenuItemProps, MenuProps } from "react-aria-components"
+import { twMerge } from "tailwind-merge"
+
+export interface NavMenuProps<T extends object> extends MenuProps<T> {}
+
+export function NavMenu<T extends object>(props: NavMenuProps<T>) {
+  return (
+    <Menu
+      className="mt-2 w-40 rounded-xl bg-white p-1 shadow-lg focus:outline-none dark:bg-zinc-800"
+      selectionMode="single"
+      {...props}
+    />
+  )
+}
+
+export interface NavMenuItemProps<T extends object> extends MenuItemProps<T> {}
+
+export function NavMenuItem<T extends object>(props: NavMenuItemProps<T>) {
+  return (
+    <MenuItem
+      className={({ isFocused, isSelected }) =>
+        twMerge(
+          "group flex w-full cursor-default items-center rounded-lg px-4 py-2 text-xs font-medium outline-none",
+          isFocused
+            ? "bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100"
+            : "text-zinc-700 dark:text-zinc-300",
+          isSelected && "text-indigo-700 dark:text-indigo-300",
+        )
+      }
+      {...props}
+    />
+  )
+}

app/components/Popover.tsx

@@ -0,0 +1,33 @@
+import {
+  Popover as BasePopover,
+  PopoverProps as BasePopoverProps,
+} from "react-aria-components"
+import { twMerge } from "tailwind-merge"
+
+export interface PopoverProps extends BasePopoverProps {
+  className?: string
+  disableExitAnimation?: boolean
+}
+
+export function Popover({
+  className,
+  disableExitAnimation,
+  ...props
+}: PopoverProps) {
+  return (
+    <BasePopover
+      className={({ isEntering, isExiting, placement }) =>
+        twMerge(
+          isEntering && "animate-popover-enter",
+          isExiting && !disableExitAnimation && "animate-popover-exit",
+          placement === "top" && "[--origin:translateY(8px)]",
+          placement === "bottom" && "[--origin:translateY(-8px)]",
+          placement === "left" && "[--origin:translateX(8px)]",
+          placement === "right" && "[--origin:translateX(-8px)]",
+          className,
+        )
+      }
+      {...props}
+    />
+  )
+}

app/components/root/Header.tsx

@@ -4,7 +4,7 @@ import { Container } from "../Container"
 import { GitHubIcon } from "../SocialIcons"
 import { CursiveName } from "./CursiveName"
 import { DesktopNavigation } from "./DesktopNavigation"
-import HeaderIconButton from "./HeaderIconButton"
+import { HeaderIconButton } from "./HeaderIconButton"
 import { MobileNavigation } from "./MobileNavigation"
 import { ThemeToggle } from "./ThemeToggle"
 
@@ -46,7 +46,7 @@ export function Header({ variant }: HeaderProps) {
             </HeaderIconButton>
 
             <ThemeToggle />
-            <MobileNavigation className="lg:hidden" />
+            <MobileNavigation />
           </div>
         </div>
       </Container>

app/components/root/HeaderIconButton.tsx

@@ -1,37 +1,36 @@
 import clsx from "clsx"
 import { Children, cloneElement, forwardRef } from "react"
+import { Button, ButtonProps } from "react-aria-components"
 
-export interface HeaderIconButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface HeaderIconButtonProps extends ButtonProps {
   as?: React.ElementType
   children: React.ReactElement | React.ReactElement[]
   href?: string
   target?: string
 }
 
-const HeaderIconButton = forwardRef<HTMLButtonElement, HeaderIconButtonProps>(
-  function HeaderIconButton(
-    { as: Component = "button", children, ...props },
-    ref,
-  ) {
-    return (
-      <Component
-        ref={ref}
-        className="group rounded-full p-2 focusable"
-        type={props.href ? undefined : "button"}
-        {...props}
-      >
-        {Children.map(children, (child) =>
-          cloneElement(child, {
-            className: clsx(
-              "size-5 text-zinc-700 transition-colors group-hover:text-black dark:text-zinc-300 dark:group-hover:text-white",
-              child.props.className,
-            ),
-          }),
-        )}
-      </Component>
-    )
-  },
-)
-
-export default HeaderIconButton
+export const HeaderIconButton = forwardRef<
+  HTMLButtonElement,
+  HeaderIconButtonProps
+>(function HeaderIconButton(
+  { as: Component = Button, children, className, ...props },
+  ref,
+) {
+  return (
+    <Component
+      ref={ref}
+      className={clsx("group rounded-full p-2 focusable", className)}
+      type={props.href ? undefined : "button"}
+      {...props}
+    >
+      {Children.map(children, (child) =>
+        cloneElement(child, {
+          className: clsx(
+            "size-5 text-zinc-700 transition-colors group-hover:text-black dark:text-zinc-300 dark:group-hover:text-white",
+            child.props.className,
+          ),
+        }),
+      )}
+    </Component>
+  )
+})