communities/red-right-hand/174bg.net/src/components/AuthHeader/index.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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>
  );
}