diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 91492c3..86348d3 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,8 +1,16 @@ import "~/styles/globals.css"; import { Inter as FontSans } from "next/font/google"; import { cn } from "~/lib/utils" +import { auth } from "~/auth" +import Sign_In_Apple_Button from "~/components/auth/server/SignInAppleButton" +import Title from "~/components/home/Title" +import First_Sign_In_Form from "~/components/auth/FirstSignInForm" import { SessionProvider } from "next-auth/react"; import Theme_Provider from "~/components/theme/theme_provider" +import Hero from "~/components/home/Hero" +import Nav_Bar from "~/components/home/NavBar" +import Avatar_Popover from "~/components/auth/AvatarPopover" +import Theme_Toggle from "~/components/theme/theme_toggle" import { type Metadata } from "next"; export const metadata: Metadata = { @@ -16,27 +24,81 @@ const fontSans = FontSans({ variable: "--font-sans", }); -export default function RootLayout({ +export default async function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { - return ( - - - + - - {children} - - - - - ); + + +
+
+ +
+
+ + <Sign_In_Apple_Button /> + </div> + </main> + {children} + </SessionProvider> + </Theme_Provider> + </body> + </html> + ); + } else { + const users_email = session.user.email ?? ""; + const users_name = session.user.name ?? "New User"; + return ( + <html lang="en"> + <body + className={cn( + "min-h-screen bg-background font-sans antialiased", + fontSans.variable)} + > + <Theme_Provider + attribute="class" + defaultTheme="system" + enableSystem={true} + disableTransitionOnChange={true} + > + <SessionProvider> + <div className="w-11/12 flex flex-col mx-auto"> + < First_Sign_In_Form users_name={users_name} users_email={users_email} /> + </div> + <div className="flex flex-row p-4"> + <div className="w-1/4 p-4"> + <div className="flex flex-col"> + <Hero /> + <Nav_Bar /> + </div> + </div> + {children} + <div className="w-1/12 p-4 flex flex-row justify-end"> + <div className="pb-1 px-4"> + <Theme_Toggle /> + </div> + <div className="w-auto"> + <Avatar_Popover /> + </div> + </div> + </div> + </SessionProvider> + </Theme_Provider> + </body> + </html> + ); + } } diff --git a/src/app/page.tsx b/src/app/page.tsx index dca79c4..3d6f1b6 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,52 +1,17 @@ "use server" -import Theme_Toggle from "~/components/theme/theme_toggle" import { auth } from "~/auth" -import Sign_In_Apple_Button from "~/components/auth/server/SignInAppleButton" -import Title from "~/components/home/Title" -import Avatar_Popover from "~/components/auth/AvatarPopover" -import First_Sign_In_Form from "~/components/auth/FirstSignInForm" -import Hero from "~/components/home/Hero" import Breadcrumb_Home from "~/components/home/breadcrumb/BreadcrumbHome" -import Nav_Bar from "~/components/home/NavBar" export default async function HomePage() { - const session = await auth(); - if (!session?.user) { + const session = await auth() + if (!session?.user) return <></> return ( - <main className="min-h-screen"> - <div className="w-full justify-end items-end p-3 flex flex-col"> - <Theme_Toggle /> - </div> - <div className="w-full flex flex-col justify-center items-center"> - <Title /> - <Sign_In_Apple_Button /> - </div> - </main> - ); - } else { - const users_email = session.user.email ?? ""; - const users_name = session.user.name ?? "New User"; - return ( - <main className="min-h-screen"> - < First_Sign_In_Form users_name={users_name} users_email={users_email} /> - <div className="w-11/12 flex flex-col mx-auto"> - <div className="w-full flex flex-row p-4"> - < Hero /> - < Breadcrumb_Home /> - <div className="w-full p-3 flex flex-row justify-end items-end"> - <div className="my-auto flex flex-row justify-end items-end"> - <div className="pb-1 px-4"> - <Theme_Toggle /> - </div> - <div className="pl-2"> - <Avatar_Popover /> - </div> - </div> - </div> + <div className="w-2/3 flex flex-col p-6"> + <div className="flex flex-row"> + <div className=""> + <Breadcrumb_Home /> </div> - <Nav_Bar /> </div> - </main> + </div> ); - } } diff --git a/src/components/home/NavBar.tsx b/src/components/home/NavBar.tsx index 25f5c88..be648c3 100644 --- a/src/components/home/NavBar.tsx +++ b/src/components/home/NavBar.tsx @@ -4,8 +4,6 @@ import Link from "next/link" import { Card, CardContent, - CardFooter, - CardHeader, } from "~/components/ui/card" const fontSans = FontSans({ @@ -19,50 +17,51 @@ export default function Nav_Bar() { "py-6 text-2xl font-semibold font-sans antialiased", fontSans.variable)} > <Card className="p-4"> - <CardHeader> - </CardHeader> - <CardContent className="pb-12"> + <CardContent className="py-4"> <Link href="/"> Dashboard </Link> </CardContent> - <CardContent className="pb-12"> + <CardContent className="py-4"> <Link href="/"> Make Payment </Link> </CardContent> - <CardContent className="pb-12"> + <CardContent className="py-4"> <Link href="/"> Auto-Payment </Link> </CardContent> - <CardContent className="pb-12"> + <CardContent className="py-4"> <Link href="/"> Payment Methods </Link> </CardContent> - <CardContent className="pb-12"> + <CardContent className="py-4"> <Link href="/"> Payment History </Link> </CardContent> - <CardContent className="pb-12"> + <CardContent className="py-4"> <Link href="/"> Workorders </Link> </CardContent> - <CardContent className="pb-12"> + <CardContent className="py-4"> <Link href="/"> Messages </Link> </CardContent> - <CardContent> + <CardContent className="py-4"> <Link href="/"> Documents </Link> </CardContent> - <CardFooter> - </CardFooter> + <CardContent className="pt-4"> + <Link href="/"> + Bill Tracker + </Link> + </CardContent> </Card> </div> );