update: reservation state ui update

guan404ming · May 25, 2024 · a8c1373 · a8c1373
1 parent dd534d5
commit a8c1373
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/components/image-card/reservation.tsx b/src/components/image-card/reservation.tsx
@@ -31,7 +31,12 @@ export default function Reservation({
     >
       <h1 className="line-clamp-2 w-full font-semibold">{name}</h1>
       <span className="text-sm text-muted-foreground">
-        ${price * quantity} · {status}
+        ${price * quantity} ·{" "}
+        <span
+          className={`rounded-full px-2 ${status === "finished" ? "bg-green-100 text-green-500" : status === "waiting" ? "bg-orange-100 text-orange-500" : status === "cancelled" ? "bg-red-100 text-red-500" : "bg-purple-100 text-purple-500"}`}
+        >
+          {status}
+        </span>
       </span>
 
       <Badge className="mx-2 shadow-sm" variant={"outline"}>

diff --git a/src/components/reservation-action-card.tsx b/src/components/reservation-action-card.tsx
@@ -32,7 +32,9 @@ export function ReservationActionCard({
           <div className="flex items-center gap-x-2 lg:gap-x-8">
             <p className="text-lg font-bold lg:text-2xl">{name}</p>
           </div>
-          <div className="text-md pt-2 font-normal text-muted-foreground lg:pt-4 lg:text-lg">
+          <div
+            className={`text-md rounded-full px-2 font-normal text-muted-foreground lg:text-lg ${status === "finished" ? "bg-green-100 text-green-500" : status === "waiting" ? "bg-orange-100 text-orange-500" : status === "cancelled" ? "bg-red-100 text-red-500" : "bg-purple-100 text-purple-500"}`}
+          >
             {status}
           </div>
         </div>