Adds specfific empty copy by status (#842)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

pages/bookings/[status].tsx

@@ -11,6 +11,12 @@ import BookingListItem from "@components/booking/BookingListItem";
 
 type BookingListingStatus = inferQueryInput<"viewer.bookings">["status"];
 
+const descriptionByStatus = {
+  upcoming: "As soon as someone books a time with you it will show up here.",
+  past: "Your past bookings will show up here.",
+  cancelled: "Your cancelled bookings will show up here.",
+};
+
 export default function Bookings() {
   const router = useRouter();
   const status = router.query?.status as BookingListingStatus;
@@ -35,13 +41,17 @@ export default function Bookings() {
                     </table>
                   </div>
                 )}
-                empty={() => (
-                  <EmptyScreen
-                    Icon={CalendarIcon}
-                    headline={`No upcoming bookings, yet`}
-                    description="You have no upcoming bookings. As soon as someone books a time with you it will show up here."
-                  />
-                )}
+                empty={
+                  status
+                    ? () => (
+                        <EmptyScreen
+                          Icon={CalendarIcon}
+                          headline={`No ${status} bookings, yet`}
+                          description={`You have no ${status} bookings. ${descriptionByStatus[status]}`}
+                        />
+                      )
+                    : undefined
+                }
               />
             </div>
           </div>