Create monorepo from known-good production state

app/components/SignOutButton.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import { Button } from "@/components/ui/button";
+
+type Props = {
+    className?: string;
+    /** Where to send users after logout */
+    redirectTo?: string; // default /auth/sign-in
+};
+
+export default function SignOutButton({
+    className,
+    redirectTo = "/auth/sign-in",
+}: Props) {
+    const [pending, setPending] = useState(false);
+    const router = useRouter();
+    const pathname = usePathname();
+
+    async function onClick() {
+        if (pending) return;
+        setPending(true);
+        try {
+            await fetch("/api/auth/logout", {
+                method: "POST",
+                credentials: "include", // make sure cookies are cleared
+            });
+
+            // include ?next= so they can land back here after re-auth if desired
+            const next = pathname ? `?next=${encodeURIComponent(pathname)}` : "?next=/portal";
+            router.push(redirectTo + next);
+            router.refresh();
+        } catch {
+            router.push(redirectTo);
+        } finally {
+            setPending(false);
+        }
+    }
+
+    return (
+        <Button
+        type="button"
+        onClick={onClick}
+        className={className}
+        variant="ghost"
+        size="sm"
+        disabled={pending}
+        >
+        {pending ? "Signing out…" : "Sign out"}
+        </Button>
+    );
+}