From 7329531839174f321cdcfd33cb1a4ad5312a5871 Mon Sep 17 00:00:00 2001
From: Ryukemeister <sahalrajiv-extc@atharvacoe.ac.in>
Date: Thu, 12 Oct 2023 18:20:10 +0530
Subject: [PATCH] update list vview

---
 .../atoms/availabilitylist/AvailabilityList.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/atoms/availabilitylist/AvailabilityList.tsx b/packages/atoms/availabilitylist/AvailabilityList.tsx
index 34901fe44f..4620cb0e47 100644
--- a/packages/atoms/availabilitylist/AvailabilityList.tsx
+++ b/packages/atoms/availabilitylist/AvailabilityList.tsx
@@ -1,18 +1,31 @@
+import { NewScheduleButton } from "availabilitylist/NewScheduleButton";
+
+import type { HttpError } from "@calcom/lib/http-error";
 import { Clock } from "@calcom/ui/components/icon";
 
 import { EmptyScreen } from "./EmptyScreen";
 import type { Schedule } from ".prisma/client";
 
-export function AvailabilityList({ schedules }: { schedules: Schedule[] | [] }) {
+export function AvailabilityList({
+  schedules,
+  onCreateMutation,
+}: {
+  schedules: Schedule[] | [];
+  onCreateMutation: (values: {
+    onSucess: (schedule: Schedule) => void;
+    onError: (err: HttpError) => void;
+  }) => void;
+}) {
   return (
     <>
       {schedules.length === 0 ? (
-        <div>
+        <div className="flex justify-center">
           <EmptyScreen
             Icon={Clock}
             headline="Create an availability schedule"
             subtitle="Creating availability schedules allows you to manage availability across event types. They can be applied to one or more event types."
             className="w-full"
+            buttonRaw={<NewScheduleButton createMutation={onCreateMutation} />}
           />
         </div>
       ) : (