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

102
src/app/layout.tsx
View File

@ -1,8 +1,16 @@
import "~/styles/globals.css"; import "~/styles/globals.css";
import { Inter as FontSans } from "next/font/google"; import { Inter as FontSans } from "next/font/google";
import { cn } from "~/lib/utils" 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 { SessionProvider } from "next-auth/react";
import Theme_Provider from "~/components/theme/theme_provider" 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"; import { type Metadata } from "next";
export const metadata: Metadata = { export const metadata: Metadata = {
@ -16,27 +24,81 @@ const fontSans = FontSans({
variable: "--font-sans", variable: "--font-sans",
}); });
export default function RootLayout({ export default async function RootLayout({
children, children,
}: Readonly<{ children: React.ReactNode }>) { }: Readonly<{ children: React.ReactNode }>) {
return ( const session = await auth();
<html lang="en"> if (!session?.user) {
<body return (
className={cn( <html lang="en">
"min-h-screen bg-background font-sans antialiased", <body
fontSans.variable)} className={cn(
> "min-h-screen bg-background font-sans antialiased",
<Theme_Provider fontSans.variable)}
attribute="class"
defaultTheme="system"
enableSystem={true}
disableTransitionOnChange={true}
> >
<SessionProvider> <Theme_Provider
{children} attribute="class"
</SessionProvider> defaultTheme="system"
</Theme_Provider> enableSystem={true}
</body> disableTransitionOnChange={true}
</html> >
); <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" "use server"
import Theme_Toggle from "~/components/theme/theme_toggle"
import { auth } from "~/auth" 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 Breadcrumb_Home from "~/components/home/breadcrumb/BreadcrumbHome"
import Nav_Bar from "~/components/home/NavBar"
export default async function HomePage() { export default async function HomePage() {
const session = await auth(); const session = await auth()
if (!session?.user) { if (!session?.user) return <></>
return ( return (
<main className="min-h-screen"> <div className="w-2/3 flex flex-col p-6">
<div className="w-full justify-end items-end p-3 flex flex-col"> <div className="flex flex-row">
<Theme_Toggle /> <div className="">
</div> <Breadcrumb_Home />
<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> </div>
<Nav_Bar />
</div> </div>
</main> </div>
); );
}
} }

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

@ -4,8 +4,6 @@ import Link from "next/link"
import { import {
Card, Card,
CardContent, CardContent,
CardFooter,
CardHeader,
} from "~/components/ui/card" } from "~/components/ui/card"
const fontSans = FontSans({ const fontSans = FontSans({
@ -19,50 +17,51 @@ export default function Nav_Bar() {
"py-6 text-2xl font-semibold font-sans antialiased", fontSans.variable)} "py-6 text-2xl font-semibold font-sans antialiased", fontSans.variable)}
> >
<Card className="p-4"> <Card className="p-4">
<CardHeader> <CardContent className="py-4">
</CardHeader>
<CardContent className="pb-12">
<Link href="/"> <Link href="/">
Dashboard Dashboard
</Link> </Link>
</CardContent> </CardContent>
<CardContent className="pb-12"> <CardContent className="py-4">
<Link href="/"> <Link href="/">
Make Payment Make Payment
</Link> </Link>
</CardContent> </CardContent>
<CardContent className="pb-12"> <CardContent className="py-4">
<Link href="/"> <Link href="/">
Auto-Payment Auto-Payment
</Link> </Link>
</CardContent> </CardContent>
<CardContent className="pb-12"> <CardContent className="py-4">
<Link href="/"> <Link href="/">
Payment Methods Payment Methods
</Link> </Link>
</CardContent> </CardContent>
<CardContent className="pb-12"> <CardContent className="py-4">
<Link href="/"> <Link href="/">
Payment History Payment History
</Link> </Link>
</CardContent> </CardContent>
<CardContent className="pb-12"> <CardContent className="py-4">
<Link href="/"> <Link href="/">
Workorders Workorders
</Link> </Link>
</CardContent> </CardContent>
<CardContent className="pb-12"> <CardContent className="py-4">
<Link href="/"> <Link href="/">
Messages Messages
</Link> </Link>
</CardContent> </CardContent>
<CardContent> <CardContent className="py-4">
<Link href="/"> <Link href="/">
Documents Documents
</Link> </Link>
</CardContent> </CardContent>
<CardFooter> <CardContent className="pt-4">
</CardFooter> <Link href="/">
Bill Tracker
</Link>
</CardContent>
</Card> </Card>
</div> </div>
); );