Begin working on home page

This commit is contained in:
Gabriel Brown 2024-08-08 19:52:48 -05:00
parent 2989cdd421
commit 4adf59d440
5 changed files with 153 additions and 13 deletions

View File

@ -5,6 +5,7 @@ import Sign_In_Apple_Button from "~/components/auth/server/SignInAppleButton"
import Title from "~/components/home/Title" import Title from "~/components/home/Title"
import Avatar_Popover from "~/components/auth/AvatarPopover" import Avatar_Popover from "~/components/auth/AvatarPopover"
import First_Sign_In_Form from "~/components/auth/FirstSignInForm" import First_Sign_In_Form from "~/components/auth/FirstSignInForm"
import Hero from "~/components/home/Hero"
export default async function HomePage() { export default async function HomePage() {
const session = await auth(); const session = await auth();
@ -23,21 +24,20 @@ export default async function HomePage() {
} else { } else {
const users_email = session.user.email ?? ""; const users_email = session.user.email ?? "";
const users_name = session.user.name ?? "New User"; const users_name = session.user.name ?? "New User";
console.log("session:", session);
console.log("users_email:", users_email);
console.log("users_name:", users_name);
return ( return (
<main className="min-h-screen"> <main className="min-h-screen">
<div className="w-full justify-end items-end p-3 flex flex-col"> < First_Sign_In_Form users_name={users_name} users_email={users_email} />
<div className="my-auto flex flex-row"> <div className="w-11/12 flex flex-row p-4 mx-auto">
<div className="px-4"> < Hero />
<Avatar_Popover /> <div className="w-full p-3 flex flex-row justify-end items-end">
</div> <div className="my-auto flex flex-row justify-end items-end">
<div className="pb-1 px-4">
<Theme_Toggle /> <Theme_Toggle />
</div> </div>
<div className="w-full flex flex-col justify-center items-center"> <div className="pl-2">
<h1>Welcome, {users_name.split(" ")[0]}</h1> <Avatar_Popover />
<First_Sign_In_Form users_name={users_name} users_email={users_email} /> </div>
</div>
</div> </div>
</div> </div>
</main> </main>

View File

@ -25,7 +25,7 @@ export default async function Avatar_Popover() {
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger> <DropdownMenuTrigger>
<Avatar> <Avatar>
<AvatarImage src={pfp} alt="@shadcn" /> <AvatarImage src={pfp} alt="@shadcn"/>
<AvatarFallback>{initials}</AvatarFallback> <AvatarFallback>{initials}</AvatarFallback>
</Avatar> </Avatar>
</DropdownMenuTrigger> </DropdownMenuTrigger>

View File

@ -0,0 +1,24 @@
import { Outfit as FontSans } from "next/font/google";
import { cn } from "~/lib/utils"
const fontSans = FontSans({
subsets: ["latin"],
variable: "--font-sans",
});
export default function Hero() {
return (
<div className="flex flex-col justify-start items-start">
<h1 className={cn("text-6xl font-bold text-center font-sans antialiased",
fontSans.variable)}
>
TENANT
</h1>
<h1 className={cn("text-6xl font-bold text-center font-sans antialiased",
fontSans.variable)}
>
PORTAL
</h1>
</div>
);
};

View File

@ -0,0 +1,115 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { ChevronRight, MoreHorizontal } from "lucide-react"
import { cn } from "~/lib/utils"
const Breadcrumb = React.forwardRef<
HTMLElement,
React.ComponentPropsWithoutRef<"nav"> & {
separator?: React.ReactNode
}
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
Breadcrumb.displayName = "Breadcrumb"
const BreadcrumbList = React.forwardRef<
HTMLOListElement,
React.ComponentPropsWithoutRef<"ol">
>(({ className, ...props }, ref) => (
<ol
ref={ref}
className={cn(
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
className
)}
{...props}
/>
))
BreadcrumbList.displayName = "BreadcrumbList"
const BreadcrumbItem = React.forwardRef<
HTMLLIElement,
React.ComponentPropsWithoutRef<"li">
>(({ className, ...props }, ref) => (
<li
ref={ref}
className={cn("inline-flex items-center gap-1.5", className)}
{...props}
/>
))
BreadcrumbItem.displayName = "BreadcrumbItem"
const BreadcrumbLink = React.forwardRef<
HTMLAnchorElement,
React.ComponentPropsWithoutRef<"a"> & {
asChild?: boolean
}
>(({ asChild, className, ...props }, ref) => {
const Comp = asChild ? Slot : "a"
return (
<Comp
ref={ref}
className={cn("transition-colors hover:text-foreground", className)}
{...props}
/>
)
})
BreadcrumbLink.displayName = "BreadcrumbLink"
const BreadcrumbPage = React.forwardRef<
HTMLSpanElement,
React.ComponentPropsWithoutRef<"span">
>(({ className, ...props }, ref) => (
<span
ref={ref}
role="link"
aria-disabled="true"
aria-current="page"
className={cn("font-normal text-foreground", className)}
{...props}
/>
))
BreadcrumbPage.displayName = "BreadcrumbPage"
const BreadcrumbSeparator = ({
children,
className,
...props
}: React.ComponentProps<"li">) => (
<li
role="presentation"
aria-hidden="true"
className={cn("[&>svg]:size-3.5", className)}
{...props}
>
{children ?? <ChevronRight />}
</li>
)
BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
const BreadcrumbEllipsis = ({
className,
...props
}: React.ComponentProps<"span">) => (
<span
role="presentation"
aria-hidden="true"
className={cn("flex h-9 w-9 items-center justify-center", className)}
{...props}
>
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">More</span>
</span>
)
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
export {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
BreadcrumbEllipsis,
}

View File

@ -56,6 +56,7 @@ const config = {
}, },
fontFamily: { fontFamily: {
sans: ["var(--font-sans)", ...fontFamily.sans], sans: ["var(--font-sans)", ...fontFamily.sans],
outfit: ["var(--font-outfit)", ...fontFamily.sans],
}, },
borderRadius: { borderRadius: {
lg: "var(--radius)", lg: "var(--radius)",