Add header

apps/nextjs/src/app/_components/header.tsx

@@ -0,0 +1,55 @@
+import Link from "next/link";
+
+import { auth, signIn, signOut } from "@acme/auth";
+import { Button } from "@acme/ui/button";
+
+const sharedClasses = {
+  navContainer:
+    "mx-auto flex items-left md:justify-center p-6 lg:px-8  shadow-lg",
+  linkContainer: "md:flex lg:flex-1 space-x-4 pr-4",
+  button: "text-sm font-semibold leading-6",
+  hiddenLgFlex: "min-[320px]:px-4 sm:px-4 md:flex md:justify-end",
+  hiddenLgFlex1: "min-[320px]:px-4 sm:px-4 md:flex md:flex-1 md:justify-end",
+};
+
+export default async function Header() {
+  const session = await auth();
+  const user = session?.user;
+  return (
+    <header className="w-full bg-primary text-primary-foreground shadow-md">
+      <nav className={sharedClasses.navContainer}>
+        <div className={sharedClasses.linkContainer}>
+          <Link href="/">Home</Link>
+        </div>
+        {user ? (
+          <div className="flex items-center">
+            <p className="m-3 text-sm">Logged in as {user.name}</p>
+            <form>
+              <Button
+                size="lg"
+                formAction={async () => {
+                  "use server";
+                  await signOut();
+                }}
+              >
+                Log out
+              </Button>
+            </form>
+          </div>
+        ) : (
+          <form className={sharedClasses.hiddenLgFlex1}>
+            <Button
+              size="lg"
+              formAction={async () => {
+                "use server";
+                await signIn();
+              }}
+            >
+              Sign in
+            </Button>
+          </form>
+        )}
+      </nav>
+    </header>
+  );
+}

apps/nextjs/src/app/layout.tsx

@@ -11,22 +11,23 @@ import { TRPCReactProvider } from "~/trpc/react";
 import "~/app/globals.css";
 
 import { env } from "~/env";
+import Header from "./_components/header";
 
-const PRODUCTION_DOMAINE =
+const PRODUCTION_DOMAIN =
   "https://shared-expensesnext-js-gnrsns-projects.vercel.app";
 
 export const metadata: Metadata = {
   metadataBase: new URL(
     env.VERCEL_ENV === "production"
-      ? PRODUCTION_DOMAINE
+      ? PRODUCTION_DOMAIN
       : "http://localhost:3000",
   ),
   title: "Shared expenses",
   description: "",
   openGraph: {
     title: "Shared expenses",
     description: "",
-    url: PRODUCTION_DOMAINE,
+    url: PRODUCTION_DOMAIN,
     siteName: "Shared expenses",
   },
 };
@@ -49,6 +50,8 @@ export default function RootLayout(props: { children: React.ReactNode }) {
         )}
       >
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
+          <Header />
+
           <TRPCReactProvider>{props.children}</TRPCReactProvider>
           <div className="absolute bottom-4 right-4">
             <ThemeToggle />