From 954f2407fc5961b887c75f3ad7f95c08cbfea031 Mon Sep 17 00:00:00 2001 From: Adam Oueidat Date: Tue, 2 Jul 2024 20:38:47 +0200 Subject: [PATCH 1/3] Add header --- apps/nextjs/src/app/_components/header.tsx | 55 ++++++++++++++++++++++ apps/nextjs/src/app/layout.tsx | 9 ++-- 2 files changed, 61 insertions(+), 3 deletions(-) create mode 100644 apps/nextjs/src/app/_components/header.tsx diff --git a/apps/nextjs/src/app/_components/header.tsx b/apps/nextjs/src/app/_components/header.tsx new file mode 100644 index 0000000..6e4ceac --- /dev/null +++ b/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 ( +
+ +
+ ); +} diff --git a/apps/nextjs/src/app/layout.tsx b/apps/nextjs/src/app/layout.tsx index c3e4d7f..c28d58f 100644 --- a/apps/nextjs/src/app/layout.tsx +++ b/apps/nextjs/src/app/layout.tsx @@ -11,14 +11,15 @@ 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", @@ -26,7 +27,7 @@ export const metadata: Metadata = { 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 }) { )} > +
+ {props.children}
From c5bfbccce6639b4bbd4b4f3a925de1f8a599785e Mon Sep 17 00:00:00 2001 From: Adam Oueidat Date: Wed, 10 Jul 2024 21:20:26 +0200 Subject: [PATCH 2/3] Remove auth-showcase and fix antipattern in header --- .../src/app/_components/auth-showcase.tsx | 42 ------------------- apps/nextjs/src/app/_components/header.tsx | 16 ++----- apps/nextjs/src/app/page.tsx | 1 - 3 files changed, 4 insertions(+), 55 deletions(-) delete mode 100644 apps/nextjs/src/app/_components/auth-showcase.tsx diff --git a/apps/nextjs/src/app/_components/auth-showcase.tsx b/apps/nextjs/src/app/_components/auth-showcase.tsx deleted file mode 100644 index 4bf5635..0000000 --- a/apps/nextjs/src/app/_components/auth-showcase.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { auth, signIn, signOut } from "@acme/auth"; -import { Button } from "@acme/ui/button"; - -export async function AuthShowcase() { - const session = await auth(); - - if (!session) { - return ( -
- -
- ); - } - - return ( -
-

- Logged in as {session.user.name} -

- -
- -
-
- ); -} diff --git a/apps/nextjs/src/app/_components/header.tsx b/apps/nextjs/src/app/_components/header.tsx index 6e4ceac..cf6b54b 100644 --- a/apps/nextjs/src/app/_components/header.tsx +++ b/apps/nextjs/src/app/_components/header.tsx @@ -3,22 +3,14 @@ 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 (
-