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

Begin working on front end

Browse Source
This commit is contained in:
Gabriel Brown
2024-06-13 15:40:35 -05:00
parent 4794541436
commit 258dccd4f2
15 changed files with 493 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/app/_components/auth/sign_in_gh.tsx
View File

@@ -1,13 +1,49 @@
import { signIn } from "~/auth"
import { signIn, signOut, auth } from "~/auth"
import Image from "next/image";
export async function SignInGH() {
return (
<form className="w-full"
action={async () => {
"use server";
await signIn("github");
}}>
<button className="w-full" type="submit">Sign In With GitHub</button>
</form>
);
const session = await auth();
if (session) {
return (
<div className="">
<form className=""
action={async () => {
"use server";
await signOut();
}}>
<button className="" type="submit">
<div className="flex flex-col items-center">
<Image
className="rounded-full"
src={session.user?.image ? session.user.image : ""}
alt="Profile Picture"
width={50} height={50}
/>
<div>Sign Out</div>
</div>
</button>
</form>
</div>
);
} else {
return (
<form className=""
action={async () => {
"use server";
await signIn("github");
}}>
<button className="" type="submit">
<div className="flex flex-col items-center">
<Image
className="rounded-full"
src="/images/github-mark-white.svg"
alt="GitHub"
width={50} height={50}
/>
<div>Sign In</div>
</div>
</button>
</form>
);
}
}

6
src/app/_components/ui/dock.tsx Normal file
View File

@@ -0,0 +1,6 @@
export function Dock() {
return (
<div className="fixed dock w-1/2 rounded-full bg-slate-500 h-20 bottom-2 left-1/4">
</div>
);
};

27
src/app/_components/ui/top_bar.tsx
View File

@@ -1,8 +1,31 @@
import { SignInGH } from "~/app/_components/auth/sign_in_gh";
import { GoDotFill } from "react-icons/go";
import { CiPower } from "react-icons/ci";
import { AiFillSound } from "react-icons/ai";
import { FaNetworkWired } from "react-icons/fa";
import { Button } from "~/components/ui/button";
export function Top_Bar() {
return (
<div className="top-bar w-full h-16 bg-black text-white">
<div className="top-bar w-full h-10 flex flex-row bg-black text-white rounded-full m">
<div className="Workspaces flex w-1/3 justify-start pl-4 my-auto">
<Button className="bg-black text-white hover:bg-slate-900 rounded-full">
<GoDotFill />
<GoDotFill />
</Button>
</div>
<div className="Notifications flex w-1/3 justify-center my-auto">
<Button className="bg-black text-white hover:bg-slate-900 rounded-full">
{new Date().toLocaleTimeString()}
</Button>
</div>
<div className="Quick_Settings flex w-1/3 justify-end my-auto px-4">
<Button className="bg-black text-white hover:bg-slate-900 rounded-full">
<FaNetworkWired className="w-5 h-5 mx-2" />
< AiFillSound className="w-5 h-5 mx-2" />
< CiPower className="w-5 h-5 ml-1" />
</Button>
</div>
</div>
);
};

40
src/app/layout.tsx
View File

@@ -1,8 +1,10 @@
import "~/styles/globals.css";
import { GeistSans } from "geist/font/sans";
import type { Metadata } from "next";
import { Top_Bar } from "~/app/_components/ui/top_bar";
import { SessionProvider } from "next-auth/react";
import { auth } from "~/auth";
import { Top_Bar } from "~/app/_components/ui/top_bar";
import { Dock } from "~/app/_components/ui/dock";
export const metadata: Metadata = {
title: "Create T3 App",
@@ -10,19 +12,33 @@ export const metadata: Metadata = {
icons: [{ rel: "icon", url: "/favicon.ico" }],
};
export default function RootLayout({
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" className={`${GeistSans.variable}`}>
<body>
<SessionProvider>
<Top_Bar />
{children}
</SessionProvider>
</body>
</html>
);
const session = await auth();
if (!session) {
return (
<html lang="en" className={`${GeistSans.variable}`}>
<body className="backgrd">
<SessionProvider>
{children}
</SessionProvider>
</body>
</html>
);
} else {
return (
<html lang="en" className={`${GeistSans.variable}`}>
<body className="backgrd">
<SessionProvider>
<Top_Bar />
{children}
< Dock />
</SessionProvider>
</body>
</html>
);
}
}

56
src/app/page.tsx
View File

@@ -1,37 +1,27 @@
import Link from "next/link";
import { auth } from "~/auth";
import { SignInGH } from "~/app/_components/auth/sign_in_gh";
export default function HomePage() {
return (
<main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
<h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
</h1>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
<Link
className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
href="https://create.t3.gg/en/usage/first-steps"
target="_blank"
>
<h3 className="text-2xl font-bold">First Steps →</h3>
<div className="text-lg">
Just the basics - Everything you need to know to set up your
database and authentication.
</div>
</Link>
<Link
className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
href="https://create.t3.gg/en/introduction"
target="_blank"
>
<h3 className="text-2xl font-bold">Documentation →</h3>
<div className="text-lg">
Learn more about Create T3 App, the libraries it uses, and how to
deploy it.
</div>
</Link>
export default async function HomePage() {
const session = await auth();
if (!session) {
return (
<main className="flex min-h-screen flex-col items-center justify-center bg-none text-white">
<h1 className="flex flex-col text-white text-5xl pb-10 text-center">
<div className="py-4">
{new Date().toDateString()}
</div>
</div>
</main>
);
<div className="py-4">
{new Date().toLocaleTimeString()}
</div>
</h1>
< SignInGH />
</main>
);
} else {
return (
<main className="flex min-h-screen flex-col items-center justify-center bg-none text-white">
</main>
);
}
}