update props and add schedule list item to view

packages/atoms/availabilitylist/AvailabilityList.tsx

@@ -4,17 +4,24 @@ import type { HttpError } from "@calcom/lib/http-error";
 import { Clock } from "@calcom/ui/components/icon";
 
 import { EmptyScreen } from "./EmptyScreen";
+import ScheduleListItem from "./ScheduleListItem";
 import type { Schedule } from ".prisma/client";
 
 export function AvailabilityList({
   schedules,
   onCreateMutation,
+  updateMutation,
+  duplicateMutation,
+  deleteMutation,
 }: {
   schedules: Schedule[] | [];
   onCreateMutation: (values: {
     onSucess: (schedule: Schedule) => void;
     onError: (err: HttpError) => void;
   }) => void;
+  updateMutation: ({ scheduleId, isDefault }: { scheduleId: number; isDefault: boolean }) => void;
+  duplicateMutation: ({ scheduleId }: { scheduleId: number }) => void;
+  deleteMutation: ({ scheduleId }: { scheduleId: number }) => void;
 }) {
   return (
     <>
@@ -29,15 +36,19 @@ export function AvailabilityList({
           />
         </div>
       ) : (
-        <div>
+        <div className="border-subtle bg-default mb-16 overflow-hidden rounded-md border">
-          Render availability list here
+          <ul className="divide-subtle divide-y" data-testid="schedules">
-          <div>
             {schedules.map((schedule) => (
-              <h1 key={schedule?.id}>
+              <ScheduleListItem
-                <h1>{schedule?.name}</h1>
+                key={schedule.id}
-              </h1>
+                schedule={schedule}
+                isDeletable={schedules.length !== 1}
+                updateDefault={updateMutation}
+                deleteFunction={deleteMutation}
+                duplicateFunction={duplicateMutation}
+              />
             ))}
-          </div>
+          </ul>
         </div>
       )}
     </>