Move components to layout. fix css for children objects
This commit is contained in:
parent
251d74cc05
commit
52b8a4c1cb
@ -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 (
|
||||
<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}
|
||||
const session = await auth();
|
||||
if (!session?.user) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={cn(
|
||||
"min-h-screen bg-background font-sans antialiased",
|
||||
fontSans.variable)}
|
||||
>
|
||||
<SessionProvider>
|
||||
{children}
|
||||
</SessionProvider>
|
||||
</Theme_Provider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
<Theme_Provider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem={true}
|
||||
disableTransitionOnChange={true}
|
||||
>
|
||||
<SessionProvider>
|
||||
<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>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user