58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { SignInButton, SignUpButton, UserButton } from "@clerk/nextjs";
|
|
import { useAuth } from "@clerk/nextjs";
|
|
import Link from "next/link";
|
|
|
|
export default function NavAuth() {
|
|
const { isSignedIn } = useAuth();
|
|
|
|
if (isSignedIn) {
|
|
return <UserButton />;
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<SignInButton mode="redirect" fallbackRedirectUrl="/dashboard">
|
|
<button className="rounded-lg border border-stone-200 px-4 py-2 text-sm font-medium text-stone-700 transition-colors hover:bg-stone-50">
|
|
Sign In
|
|
</button>
|
|
</SignInButton>
|
|
<SignUpButton mode="redirect" fallbackRedirectUrl="/onboarding">
|
|
<button className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-light">
|
|
Sign Up
|
|
</button>
|
|
</SignUpButton>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function LandingAuth() {
|
|
const { isSignedIn } = useAuth();
|
|
|
|
if (isSignedIn) {
|
|
return (
|
|
<Link
|
|
href="/dashboard"
|
|
className="rounded-lg bg-primary px-8 py-3 text-base font-medium text-white transition-colors hover:bg-primary-light"
|
|
>
|
|
Go to Dashboard
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
|
|
<SignInButton mode="redirect" fallbackRedirectUrl="/dashboard">
|
|
<button className="rounded-lg border border-stone-200 px-8 py-3 text-base font-medium text-stone-700 transition-colors hover:bg-stone-50">
|
|
Sign In
|
|
</button>
|
|
</SignInButton>
|
|
<SignUpButton mode="redirect" fallbackRedirectUrl="/onboarding">
|
|
<button className="rounded-lg bg-primary px-8 py-3 text-base font-medium text-white transition-colors hover:bg-primary-light">
|
|
Get Started
|
|
</button>
|
|
</SignUpButton>
|
|
</div>
|
|
);
|
|
} |