gib/rent_portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move components to layout. fix css for children objects

Browse Source
This commit is contained in:
Gabriel Brown 2024-08-30 16:51:14 -05:00
parent 251d74cc05
commit 52b8a4c1cb
3 changed files with 102 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/app/layout.tsx
View File

@ -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,9 +24,11 @@ const fontSans = FontSans({
variable: "--font-sans",
});
export default function RootLayout({
export default async function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
const session = await auth();
if (!session?.user) {
return (
<html lang="en">
<body
@ -33,10 +43,62 @@ export default function RootLayout({
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>
);
}
}

49
src/app/page.tsx
View File

@ -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 className="w-2/3 flex flex-col p-6">
<div className="flex flex-row">
<div className="">
<Breadcrumb_Home />
</div>
</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>
<Nav_Bar />
</div>
</main>
);
}
}

27
src/components/home/NavBar.tsx
View File

@ -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>
);