Begin working on front end

2024-06-13 15:40:35 -05:00
parent 4794541436
commit 258dccd4f2
15 changed files with 493 additions and 66 deletions
--- a/src/app/_components/auth/sign_in_gh.tsx
+++ b/src/app/_components/auth/sign_in_gh.tsx
@ -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>
+    );
+  }
 }
--- a/src/app/_components/ui/dock.tsx
+++ b/src/app/_components/ui/dock.tsx
@ -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>
+  );
+};
--- a/src/app/_components/ui/top_bar.tsx
+++ b/src/app/_components/ui/top_bar.tsx
@ -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>
  );
 };
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -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>
+    );
+  }
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -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>
+    );
+  }
 }
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "~/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@ -1,3 +1,90 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+  @layer base {
+    :root {
+      --background: 222.2 84% 4.9%;
+      --foreground: 210 40% 98%;
+
+      --card: 222.2 84% 4.9%;
+      --card-foreground: 210 40% 98%;
+
+      --popover: 222.2 84% 4.9%;
+      --popover-foreground: 210 40% 98%;
+
+      --primary: 210 40% 98%;
+      --primary-foreground: 222.2 47.4% 11.2%;
+
+      --secondary: 217.2 32.6% 17.5%;
+      --secondary-foreground: 210 40% 98%;
+
+      --muted: 217.2 32.6% 17.5%;
+      --muted-foreground: 215 20.2% 65.1%;
+
+      --accent: 217.2 32.6% 17.5%;
+      --accent-foreground: 210 40% 98%;
+
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 210 40% 98%;
+
+      --border: 217.2 32.6% 17.5%;
+      --input: 217.2 32.6% 17.5%;
+      --ring: 212.7 26.8% 83.9%;
+    }
+
+    .dark {
+      --background: 0 0% 100%;
+      --foreground: 222.2 84% 4.9%;
+
+      --card: 0 0% 100%;
+      --card-foreground: 222.2 84% 4.9%;
+
+      --popover: 0 0% 100%;
+      --popover-foreground: 222.2 84% 4.9%;
+
+      --primary: 222.2 47.4% 11.2%;
+      --primary-foreground: 210 40% 98%;
+
+      --secondary: 210 40% 96.1%;
+      --secondary-foreground: 222.2 47.4% 11.2%;
+
+      --muted: 210 40% 96.1%;
+      --muted-foreground: 215.4 16.3% 46.9%;
+
+      --accent: 210 40% 96.1%;
+      --accent-foreground: 222.2 47.4% 11.2%;
+
+      --destructive: 0 84.2% 60.2%;
+      --destructive-foreground: 210 40% 98%;
+
+      --border: 214.3 31.8% 91.4%;
+      --input: 214.3 31.8% 91.4%;
+      --ring: 222.2 84% 4.9%;
+
+      --radius: 0.5rem;
+    }
+  }
+
+  @layer base {
+    * {
+      @apply border-border;
+    }
+    body {
+      @apply bg-background text-foreground;
+    }
+  }
+
+  html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  .backgrd {
+    background-image: url("/images/wallpapers/faroe_islands.jpg");
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    height: 100%;
+  }