From fef821022e6a5d9a828336cb06cb4b9f01aca2b1 Mon Sep 17 00:00:00 2001
From: Ryukemeister <sahalrajiv-extc@atharvacoe.ac.in>
Date: Thu, 12 Oct 2023 18:17:46 +0530
Subject: [PATCH] add schedule item for each day

---
 .../availabilitylist/ScheduleListItem.tsx     | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 packages/atoms/availabilitylist/ScheduleListItem.tsx

diff --git a/packages/atoms/availabilitylist/ScheduleListItem.tsx b/packages/atoms/availabilitylist/ScheduleListItem.tsx
new file mode 100644
index 0000000000..c8fabf6387
--- /dev/null
+++ b/packages/atoms/availabilitylist/ScheduleListItem.tsx
@@ -0,0 +1,58 @@
+import { Badge } from "@/components/ui/badge";
+
+type Schedule = {
+  isDefault: boolean;
+  id: number;
+  name: string;
+  availability: {
+    id: number;
+    startTime: Date;
+    endTime: Date;
+    userId: number | null;
+    eventTypeId: number | null;
+    date: Date | null;
+    days: number[];
+    scheduleId: number | null;
+  }[];
+  timezone: string | null;
+};
+
+export function ScheduleListItem({
+  schedule,
+  isDeletable,
+  displayOptions,
+}: {
+  schedule: Schedule;
+  isDeletable: boolean;
+  displayOptions?: {
+    timeZone?: string;
+    hour12?: boolean;
+  };
+}) {
+  return (
+    <li key={schedule.id}>
+      <div className="hover:bg-muted flex items-center justify-between py-5 ltr:pl-4 rtl:pr-4 sm:ltr:pl-0 sm:rtl:pr-0">
+        <div className="group flex w-full items-center justify-between sm:px-6">
+          <a className="flex-grow truncate text-sm" href={`/availability/${schedule.id}`}>
+            <h1>{schedule.name}</h1>
+            <div className="space-x-2 rtl:space-x-reverse">
+              {schedule.isDefault && <Badge className="bg-success text-success text-xs">Default</Badge>}
+            </div>
+            <p className="text-subtle mt-1">
+              {schedule.availability
+                .filter((availability) => !!availability.days.length)
+                .map((availability) => (
+                  <h1 key={availability.id}>Return fragment here</h1>
+                ))}
+              {(schedule.timeZone || displayOptions?.timeZone) && (
+                <p className="my-1 flex items-center first-letter:text-xs">
+                  Display globe here &nbsp;{schedule.timeZone ?? displayOptions?.timeZone}
+                </p>
+              )}
+            </p>
+          </a>
+        </div>
+      </div>
+    </li>
+  );
+}