Patientcard

app/dashboard/page.tsx

@@ -1,6 +1,7 @@
 import { TypographyH2, TypographyP } from "@/components/ui/typography";
 import { createServerSupabaseClient } from "@/lib/server-utils";
 import { redirect } from "next/navigation";
+import PatientCard from "../../components/patient-card";
 
 export default async function Dashboard() {
   // Create supabase server component client and obtain user session from stored cookie
@@ -20,6 +21,16 @@ export default async function Dashboard() {
       <TypographyH2>Dashboard</TypographyH2>
       <TypographyP>This is a protected route accessible only to signed-in users.</TypographyP>
       {userEmail && <TypographyP>{`Your email is ${userEmail}`}</TypographyP>}
+      <br />
+      <PatientCard
+        userId="id"
+        firstName="Tara"
+        lastName="Ackles"
+        diagnosis="ACL Tear"
+        lastVisit={new Date()}
+        nextVisit={new Date()}
+        avatar="https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
+      />
     </>
   );
 }

app/page.tsx

@@ -1,4 +1,4 @@
-import { TypographyH2, TypographyP } from "@/components/ui/typography";
+import { TypographyH2 } from "@/components/ui/typography";
 import { createServerSupabaseClient } from "@/lib/server-utils";
 import { redirect } from "next/navigation";
 
@@ -13,7 +13,5 @@ export default async function Home() {
     // Users who are already signed in should be redirected to dashboard
     redirect("/login");
   }
-  return (
-      <TypographyH2>Welcome to Therable!</TypographyH2>
-  );
+  return <TypographyH2>Welcome to Therable!</TypographyH2>;
 }

components/patient-card.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import * as Avatar from "@radix-ui/react-avatar";
+
+interface PatientCardProps {
+  userId: string;
+  firstName: string;
+  lastName: string;
+  diagnosis?: string;
+  lastVisit?: Date;
+  nextVisit?: Date;
+  avatar?: string;
+}
+
+export default function PatientCard(props: PatientCardProps) {
+  return (
+    <div className="h-[260px] w-[252px] rounded-xl border-2 p-4 shadow-md">
+      <div className="flex h-full flex-col justify-between">
+        <div className="flex flex-row gap-3 pl-1 pt-2">
+          <Avatar.Root
+            className="flex h-16 w-16 items-center justify-center
+                overflow-hidden rounded-full border-2 align-middle"
+          >
+            <Avatar.Image className="object-cover" src={props.avatar} alt={props.lastName} />
+            <Avatar.Fallback className="text-2xl font-medium">
+              {props.firstName.charAt(0) + props.lastName.charAt(0)}
+            </Avatar.Fallback>
+          </Avatar.Root>
+          <div className="space-y-1 text-xs">
+            <div className="pb-0.25 text-lg font-medium">
+              {props.firstName} {props.lastName}
+            </div>
+            {props.diagnosis && <div>Diagnosis: {props.diagnosis}</div>}
+            {props.lastVisit && (
+              <div>
+                Last visit:{" "}
+                {props.lastVisit.getMonth() + "/" + props.lastVisit.getDay() + "/" + props.lastVisit.getFullYear()}
+              </div>
+            )}
+            {props.nextVisit && (
+              <div>
+                Next visit:{" "}
+                {props.nextVisit.getMonth() + "/" + props.nextVisit.getDay() + "/" + props.nextVisit.getFullYear()}
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="flex flex-row justify-center gap-6 pb-1">
+          <button className="h-fit rounded-lg bg-green-50 p-2 pl-3 pr-4">
+            <div className="h-12" />
+            <div className="text-xs font-medium text-green-700">Progress</div>
+          </button>
+          <button className="h-fit rounded-lg bg-gray-100 p-2 pl-3 pr-4">
+            <div className="h-12" />
+            <div className="text-xs font-medium text-gray-500">Message</div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}