firefly/flurry
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added ClientProviders component

Browse Source
This commit is contained in:
Zyrrus
2023-12-17 01:46:38 -06:00
parent c1ea29e2b2
commit 2822362919
2 changed files with 48 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/client-providers.tsx Normal file
View File

@@ -0,0 +1,11 @@
"use client";
import type { PropsWithChildren } from "react";
/**
* Client-side provider components that need to wrap
* the entire app should be defined here to avoid
* turning the entire app into a client component
*/
export default function ClientProviders({ children }: PropsWithChildren) {
return <>{children}</>;
}

84
src/app/layout.tsx
View File

@@ -12,6 +12,7 @@ import {
SignedOut,
} from "@clerk/nextjs";
import { UserButton } from "@clerk/nextjs";
import ClientProviders from "~/app/client-providers";
const inter = Inter({
subsets: ["latin"],
@@ -24,6 +25,8 @@ export const metadata = {
icons: [{ rel: "icon", url: "/favicon.ico" }],
};
const routes = ["Home", "Courses", "Practice", "Profile", "Settings"];
export default function RootLayout({
children,
}: {
@@ -34,54 +37,41 @@ export default function RootLayout({
<html lang="en">
<body className={`font-sans ${inter.variable} px-4`}>
<TRPCReactProvider cookies={cookies().toString()}>
<nav className="mb-8">
<ul className="flex flex-row flex-wrap items-center gap-x-6 gap-y-1">
<li className="">
<a className="hover:underline" href="/">
Flurry Homepage
</a>
</li>
<li className="">
<a className="hover:underline" href="/home">
Home
</a>
</li>
<li className="">
<a className="hover:underline" href="/courses">
Courses
</a>
</li>
<li className="">
<a className="hover:underline" href="/practice">
Practice
</a>
</li>
<li className="">
<a className="hover:underline" href="/profile">
Profile
</a>
</li>
<li className="">
<a className="hover:underline" href="/settings">
Settings
</a>
</li>
<SignedIn>
<li>
<UserButton showName />
<ClientProviders>
<nav className="mb-8">
<ul className="flex flex-row flex-wrap items-center gap-x-6 gap-y-1">
<li className="">
<a className="hover:underline" href="/">
Flurry Homepage
</a>
</li>
</SignedIn>
<SignedOut>
<li>
<SignInButton />
</li>
<li>
<SignUpButton />
</li>
</SignedOut>
</ul>
</nav>
{children}
{routes.map((route) => (
<li>
<a
className="hover:underline"
href={`/${route.toLowerCase()}`}
>
{route}
</a>
</li>
))}
<SignedIn>
<li>
<UserButton showName />
</li>
</SignedIn>
<SignedOut>
<li>
<SignInButton />
</li>
<li>
<SignUpButton />
</li>
</SignedOut>
</ul>
</nav>
{children}
</ClientProviders>
</TRPCReactProvider>
</body>
</html>