only show auth header when auth query param is present

1 files changed, 26 insertions, 0 deletions

diff --git a/communities/red-right-hand/174bg.net/src/components/AuthHeader/index.js b/communities/red-right-hand/174bg.net/src/components/AuthHeader/index.js
new file mode 100644
index 0000000..1661421
--- /dev/null
+++ b/communities/red-right-hand/174bg.net/src/components/AuthHeader/index.js
@@ -0,0 +1,26 @@
+"use client";
+
+import { Show, SignInButton, SignUpButton, UserButton } from "@clerk/nextjs";
+import { useSearchParams } from "next/navigation";
+
+export default function AuthHeader() {
+  const searchParams = useSearchParams();
+
+  if (!searchParams.has("auth")) return null;
+
+  return (
+    <header className="flex justify-end items-center p-4 gap-4 h-16">
+      <Show when="signed-out">
+        <SignInButton />
+        <SignUpButton>
+          <button className="bg-purple-700 text-white rounded-full font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 cursor-pointer">
+            Sign Up
+          </button>
+        </SignUpButton>
+      </Show>
+      <Show when="signed-in">
+        <UserButton />
+      </Show>
+    </header>
+  );
+}