import {
ClerkLoaded,
ClerkLoading,
SignInButton,
SignedIn,
SignedOut,
UserButton,
useAuth,
} from '@clerk/nextjs';
import { Loader } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
// import { links } from '@/config';
export const Header = () => {
const { userId } = useAuth();
return (
<header className='h-20 w-full border-b-2 border-slate-200 px-4'>
<div className='mx-auto flex h-full items-center justify-between lg:max-w-screen-lg'>
<Link href='/' className='flex items-center gap-x-3 pb-7 pl-4 pt-8'>
<Image src='/mascot.svg' alt='Mascot' height={40} width={40} />
<h1 className='text-2xl font-extrabold tracking-wide text-green-600'>
Lingo
</h1>
</Link>
<div className='flex gap-x-3'>
<ClerkLoading>
<Loader className='h-5 w-5 animate-spin text-muted-foreground' />
</ClerkLoading>
<ClerkLoaded>
<SignedIn>
<UserButton afterSignOutUrl='/' />
</SignedIn>
<SignedOut>
<SignInButton
mode='modal'
afterSignInUrl='/learn'
afterSignUpUrl='/learn'
>
<Button size='lg' variant='ghost'>
Login
</Button>
</SignInButton>
</SignedOut>
<Link
// href={links.sourceCode}
href='/'
target='_blank'
rel='noreferrer noopener'
className={userId ? 'pt-1.5' : 'pt-3'}
>
<Image
src='/github.svg'
alt='Source Code'
height={20}
width={20}
/>
</Link>
</ClerkLoaded>
</div>
</div>
</header>
);
};
1 of 1 error
Next.js (14.2.5)
Unhandled Runtime Error
Error: (0 , _clerk_nextjs__WEBPACK_IMPORTED_MODULE_4__.useAuth) is not a function
Source
src\app\(marketing)\header.tsx (18:28) @ useAuth
16 |
17 | export const Header = () => {
> 18 | const { userId } = useAuth();
| ^
19 |
20 | return (
21 | <header className='h-20 w-full border-b-2 border-slate-200 px-4'>
Call Stack
Show collapsed frames
