69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
import type { Metadata } from 'next'
|
|
import { dark, neobrutalism } from '@clerk/themes'
|
|
import {
|
|
ClerkProvider,
|
|
SignInButton,
|
|
SignUpButton,
|
|
SignedIn,
|
|
SignedOut,
|
|
UserButton,
|
|
} from '@clerk/nextjs'
|
|
import { Geist, Geist_Mono } from 'next/font/google'
|
|
import './globals.css'
|
|
import Menu from './menu'
|
|
|
|
const geistSans = Geist({
|
|
variable: '--font-geist-sans',
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
const geistMono = Geist_Mono({
|
|
variable: '--font-geist-mono',
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Pawship',
|
|
description: 'Generated by create next app',
|
|
}
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode
|
|
}>) {
|
|
return (
|
|
<ClerkProvider appearance={{
|
|
theme: dark,
|
|
signIn: { theme: neobrutalism },
|
|
}}>
|
|
<html lang="en">
|
|
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
|
|
<header className="flex justify-end items-center p-4 gap-4 h-16">
|
|
{/* Show the sign-in and sign-up buttons when the user is signed out */}
|
|
<Menu />
|
|
<SignedOut>
|
|
<SignInButton>
|
|
<button className="nav-element">
|
|
Sign In
|
|
</button>
|
|
</SignInButton>
|
|
<SignUpButton>
|
|
<button className="nav-element">
|
|
Sign Up
|
|
</button>
|
|
</SignUpButton>
|
|
</SignedOut>
|
|
{/* Show the user button when the user is signed in */}
|
|
<SignedIn>
|
|
<UserButton />
|
|
</SignedIn>
|
|
</header>
|
|
<h1>This is the index layout warpper \/</h1>
|
|
{children}
|
|
<h1>This is the index layout warpper /\</h1>
|
|
</body>
|
|
</html>
|
|
</ClerkProvider>
|
|
)
|
|
} |