Header Component

1import { Button } from '@/components/ui/button';
2import { Show, SignInButton, SignUpButton, UserButton } from '@clerk/nextjs';
3import Link from 'next/link';
4 
5export function Header() {
6  return (
7    <header className='flex h-16 items-center justify-between gap-4 border-b px-4'>
8      <Link
9        href='/'
10        className='flex items-center gap-x-4'
11      >
12        <svg
13          fill='none'
14          viewBox='0 0 44 44'
15          className='size-9'
16          aria-hidden
17        >
18          <path
19            fill='currentColor'
20            d='M38 0a6 6 0 0 1 6 6v32a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6V6a6 6 0 0 1 6-6h32ZM22.982 9.105c-.208-1.081-1.756-1.081-1.964 0l-.85 4.421a1 1 0 0 1-1.666.541l-3.287-3.077c-.804-.752-2.056.158-1.589 1.155l1.911 4.077a1 1 0 0 1-1.03 1.417l-4.467-.558c-1.093-.136-1.571 1.336-.607 1.868l3.942 2.175a1 1 0 0 1 0 1.752l-3.942 2.175c-.964.532-.486 2.004.607 1.868l4.468-.558a1 1 0 0 1 1.03 1.417l-1.912 4.077c-.467.997.785 1.907 1.589 1.155l3.287-3.077a1 1 0 0 1 1.666.54l.85 4.422c.208 1.081 1.756 1.081 1.964 0l.85-4.421a1 1 0 0 1 1.666-.541l3.287 3.077c.804.752 2.056-.158 1.589-1.155l-1.911-4.077a1 1 0 0 1 1.03-1.417l4.467.558c1.093.136 1.572-1.336.607-1.868l-3.942-2.175a1 1 0 0 1 0-1.752l3.942-2.175c.965-.532.486-2.004-.607-1.868l-4.468.558a1 1 0 0 1-1.03-1.417l1.912-4.077c.467-.997-.785-1.907-1.589-1.155l-3.287 3.077a1 1 0 0 1-1.666-.54l-.85-4.422Z'
21          />
22        </svg>
23        <span className='font-semibold'>Acme Co.</span>
24      </Link>
25      <div className='flex items-center gap-x-4'>
26        <Show when='signed-out'>
27          <SignInButton>
28            <Button variant='ghost'>Sign in</Button>
29          </SignInButton>
30          <SignUpButton>
31            <Button>Sign up</Button>
32          </SignUpButton>
33        </Show>
34        <Show when='signed-in'>
35          <UserButton />
36        </Show>
37      </div>
38    </header>
39  );
40}