Begin working on front end

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>
+    );
+  }
 }

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>
+  );
+};

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