idek a lot

src/components/auth/Sign_Out.tsx

@@ -0,0 +1,13 @@
+import { signOut } from "~/auth"
+ 
+export default function Sign_Out() {
+  return (
+    <form className="w-full"
+      action={async () => {
+        "use server"
+        await signOut()
+      }}>
+      <button type="submit" className="w-full">Sign Out</button>
+    </form>
+  )
+}

src/components/ui/TT_Header.tsx

@@ -0,0 +1,16 @@
+import Image from "next/image";
+
+export default function TT_Header() {
+  return (
+    <header className="w-full">
+      <div className="flex flex-row items-center text-center justify-center p-8">
+        <Image src="/images/tech_tracker_logo.png"
+          alt="Tech Tracker Logo" width={100} height={100}
+        />
+        <h1 className="text-6xl font-semibold pl-4">
+          Tech Tracker
+        </h1>
+      </div>
+    </header>
+  );
+};

src/components/ui/Techs_Table.tsx

@@ -0,0 +1,48 @@
+import { db } from '~/server/db';
+
+export default async function Techs_Table() {
+
+  const employees = await db.query.users.findMany({
+    orderBy: (model, {desc}) => desc(model.id),
+  });
+
+  const formatTime = (timestamp: Date) => {
+    const date = new Date(timestamp);
+    const time = date.toLocaleTimeString("en-US",
+      {hour: "numeric", minute: "numeric",});
+    const day = date.getDate();
+    const month = date.toLocaleString("default", { month: "long" });
+    return `${time} - ${month} ${day}`;
+  }
+
+  return (
+    <table className="w-5/6 m-auto text-center border-collapse text-[42px]">
+      <thead className="bg-gradient-to-br from-[#212121] to-[#333333]">
+        <tr>
+          <th className="p-5 border border-[#3e4446] text-[48px]"/>
+          <th className="p-2 border border-[#3e4446] text-[48px]">
+            Name
+          </th>
+          <th className="p-2 border border-[#3e4446] text-[48px]">
+            Status
+          </th>
+          <th className="p-2 border border-[#3e4446] text-[48px]">
+            Updated At
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+          {employees.map((employee) => (
+            <tr className="even:bg-gradient-to-bl from-[#222222] to-[#232323]" key={employee.id}>
+              <td className="p-1 border border-[#3e4446]">
+                <input type="checkbox"/>
+              </td>
+              <td className="p-1 border border-[#3e4446]">{employee.name}</td>
+              <td className="p-1 border border-[#3e4446]">{employee.status}</td>
+              <td className="p-1 border border-[#3e4446]">{formatTime(employee.updatedAt)}</td>
+            </tr>
+          ))}
+      </tbody>
+    </table>
+  );
+};