perkinsjr/layout.tsx

## layout.tsx
import '../styles/globals.css'
import { ClerkProvider, SignInButton, SignedIn, SignedOut, SignOutButton } from '@clerk/nextjs'
import { Inter } from 'next/font/google'
import Image from 'next/image'
import Script from 'next/script'
import styles from '../styles/Header.module.css'
import Link from 'next/link'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Clerk with App Router',
  description: 'Power your Next.js application with Clerk ',
}

const Header = async () => {

  return (
    <header className={styles.header}>
      <div className={styles.left}>
        <Link href="/" className={styles.logo}>
          <Image src="/logo.svg" width="32" height="32" alt="Logo" />
          <span className={styles.appName}>Your application</span>
        </Link>
      </div>
      <div className={styles.right}>
        <SignedOut>
          <SignInButton />
        </SignedOut>
        <SignedIn>
          <SignOutButton />
        </SignedIn>
      </div>
    </header>
  )
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  return (
    <html lang="en">
      <head></head>
      <ClerkProvider>
        <body className={inter.className}>
          <Header />
          <main>{children}</main>
        </body>
      </ClerkProvider>
    </html>
  )
}
	import '../styles/globals.css'
	import { ClerkProvider, SignInButton, SignedIn, SignedOut, SignOutButton } from '@clerk/nextjs'
	import { Inter } from 'next/font/google'
	import Image from 'next/image'
	import Script from 'next/script'
	import styles from '../styles/Header.module.css'
	import Link from 'next/link'

	const inter = Inter({ subsets: ['latin'] })

	export const metadata = {
	title: 'Clerk with App Router',
	description: 'Power your Next.js application with Clerk ',
	}

	const Header = async () => {

	return (
	<header className={styles.header}>
	<div className={styles.left}>
	<Link href="/" className={styles.logo}>
	<Image src="/logo.svg" width="32" height="32" alt="Logo" />
	<span className={styles.appName}>Your application</span>
	</Link>
	</div>
	<div className={styles.right}>
	<SignedOut>
	<SignInButton />
	</SignedOut>
	<SignedIn>
	<SignOutButton />
	</SignedIn>
	</div>
	</header>
	)
	}

	export default function RootLayout({
	children,
	}: {
	children: React.ReactNode
	}) {

	return (
	<html lang="en">
	<head></head>
	<ClerkProvider>
	<body className={inter.className}>
	<Header />
	<main>{children}</main>
	</body>
	</ClerkProvider>
	</html>
	)
	}