Blade - Hacker Dashboard

apps/blade/src/app/_components/auth-home.tsx

@@ -15,10 +15,10 @@ export function AuthHome() {
         Manage your Knight Hacks membership, hackathon information, and more
         with <b>Blade</b>.
       </p>
-      <Link href={"/dashboard"}>
-        <Button size="lg">
+      <Link className="w-full sm:w-auto" href={"/dashboard"}>
+        <Button size="lg" className="w-full sm:w-auto">
           <LayoutDashboard color={"#fff"} size={USER_DROPDOWN_ICON_SIZE} />{" "}
-          <span className="ml-1">Open Dashboard</span>
+          <span className="ml-1">Dashboard</span>
         </Button>
       </Link>
     </div>

apps/blade/src/app/_components/hero.tsx

@@ -29,6 +29,7 @@ export function Hero() {
                 <form className="p-[1.5px]">
                   <Button
                     size="lg"
+                    className="w-full"
                     formAction={async () => {
                       "use server";
                       await signIn("discord", {
@@ -40,12 +41,12 @@ export function Hero() {
                   </Button>
                 </form>
                 <Link href={"/sponsor"}>
-                  <div className="relative z-10 flex max-w-max cursor-pointer items-center overflow-hidden rounded-md p-[1.5px]">
+                  <div className="relative z-10 flex cursor-pointer items-center overflow-hidden rounded-md p-[1.5px] sm:w-full">
                     <div className="moving-border absolute inset-0 h-full rounded-md bg-[conic-gradient(#0ea5e9_20deg,transparent_120deg)]"></div>
-                    <div className="relative z-20 flex">
+                    <div className="relative z-20 flex w-full">
                       <Button
                         variant="secondary"
-                        className="hover:bg-[#E6E7E9] dark:hover:bg-[#2C3644]"
+                        className="w-full hover:bg-[#E6E7E9] dark:hover:bg-[#2C3644]"
                         size="lg"
                       >
                         Sponsor us!

apps/blade/src/app/_components/user-interface.tsx

@@ -6,10 +6,20 @@ import MemberDashboard from "../dashboard/_components/member-dashboard/member-da
 import { HackerAppCard, MemberAppCard } from "./option-cards";
 
 export async function UserInterface() {
-  const member = await api.member.getMember();
-  const hacker = await api.hacker.getHacker();
+  const [member, hacker] = await Promise.allSettled([
+    api.member.getMember(),
+    api.hacker.getHacker(),
+  ]);
 
-  if (!member && !hacker) {
+  if (member.status === "rejected" || hacker.status === "rejected") {
+    return (
+      <div className="mt-10 flex flex-col items-center justify-center gap-y-6 font-bold">
+        Something went wrong. Please try again later.
+      </div>
+    );
+  }
+
+  if (!member.value && !hacker.value) {
     return (
       <div className="flex flex-wrap justify-center gap-5">
         <MemberAppCard />
@@ -21,7 +31,7 @@ export async function UserInterface() {
   return (
     <div className="flex justify-center">
       <Tabs
-        defaultValue={member ? "Member" : hacker ? "Hacker" : ""}
+        defaultValue={member.value ? "Member" : hacker.value ? "Hacker" : ""}
         className="w-[400px]"
       >
         <TabsList className="grid w-full grid-cols-2">
@@ -39,10 +49,10 @@ export async function UserInterface() {
           </TabsTrigger>
         </TabsList>
         <TabsContent className="absolute left-0 w-full" value="Member">
-          <MemberDashboard member={member} />
+          <MemberDashboard member={member.value} />
         </TabsContent>
-        <TabsContent value="Hacker">
-          <HackerDashboard hacker={hacker} />
+        <TabsContent value="Hacker" className="absolute left-0 mt-32 w-full">
+          <HackerDashboard hacker={hacker.value} />
         </TabsContent>
       </Tabs>
     </div>

apps/blade/src/app/dashboard/_components/hacker-dashboard/hacker-dashboard.tsx

@@ -2,20 +2,74 @@ import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 
 import type { api as serverCall } from "~/trpc/server";
+import { api } from "~/trpc/server";
+import { HackerData } from "./hacker-data";
+import { HackerResumeButton } from "./hacker-resume-button";
+import { PastHackathonButton } from "./past-hackathons";
 
 export const metadata: Metadata = {
   title: "Hacker Dashboard",
   description: "The official Knight Hacks Hacker Dashboard",
 };
 
-export default function HackerDashboard({
+export default async function HackerDashboard({
   hacker,
 }: {
   hacker: Awaited<ReturnType<(typeof serverCall.hacker)["getHacker"]>>;
 }) {
   if (!hacker) {
-    redirect("/");
+    redirect("/hacker/application");
   }
 
-  return <div className="mx-auto">Work in progress...</div>;
+  const [resume, pastHackathons] = await Promise.allSettled([
+    api.resume.getResume(),
+    api.hacker.getHackathons(),
+  ]);
+
+  return (
+    <>
+      <div className="animate-mobile-initial-expand relative mx-auto flex h-0 w-[90%] max-w-[70rem] bg-[#E5E7EB] dark:bg-[#0A0F1D] sm:py-0 sm:pb-0 lg:max-h-56">
+        {/* Main content */}
+        <HackerData data={hacker} />
+
+        {/* Transparent Triangle overlay in bottom right corner */}
+        <div className="border-b-solid border-l-solid absolute bottom-0 right-0 h-0 w-0 border-b-[30px] border-l-[30px] border-b-background border-l-transparent"></div>
+
+        {/* Triangle in bottom right corner */}
+        <div
+          className="absolute bottom-0 right-0 h-0 w-0"
+          style={{
+            borderBottom: "20px solid #6C26D9", // Change to bg color
+            borderLeft: "20px solid transparent",
+          }}
+        ></div>
+
+        {/* Top rectangle */}
+        <div className="absolute -top-[1.4rem] right-0 h-6 w-40 bg-[#E5E7EB] dark:bg-[#0A0F1D] sm:w-96">
+          <div className="border-t-solid border-r-solid absolute left-0 top-0 h-0 w-0 border-r-[23px] border-t-[23px] border-r-transparent border-t-background"></div>
+        </div>
+
+        {/* Bottom rectangle */}
+        <div className="absolute -bottom-[1.46rem] left-0 h-6 w-40 bg-[#E5E7EB] dark:bg-[#0A0F1D] sm:w-48">
+          <div className="border-b-solid border-l-solid absolute bottom-0 right-0 h-0 w-0 border-b-[24px] border-l-[24px] border-b-background border-l-transparent"></div>
+        </div>
+
+        {/* Left side rectangle */}
+        <div className="absolute -left-3 top-0 h-full w-[0.4rem] bg-primary"></div>
+      </div>
+      <div className="mx-auto mb-10 mt-20 flex w-[90%] max-w-[70rem] flex-col justify-center gap-x-2 gap-y-4 sm:flex-row">
+        {resume.status === "rejected" ||
+        pastHackathons.status === "rejected" ? (
+          <div className="font-bold">
+            Something went wrong. Please try again later.
+          </div>
+        ) : (
+          <>
+            <PastHackathonButton hackathons={pastHackathons.value} />
+            <HackerResumeButton resume={resume.value} />
+          </>
+        )}
+      </div>
+    </>
+  );
 }