@devvistatech/devvista-kit 0.0.1

package/components/addOns/functional/schedules/ScheduleGridTwo.tsx

@@ -0,0 +1,295 @@
+// src/pages/ScheduleGridTwo.tsx
+"use client";
+
+import React, { useState } from "react";
+import { AddButton, DeleteIconButton } from "@/components/other/button";
+import { ScheduleClass, WeeklySchedule } from "@/components/types";
+import { ClassPopup } from "../ClassPopup";
+import { SCHEDULE_GRID_TWO } from "./constants/ScheduleGridTwo";
+import { useUser } from "@clerk/nextjs";
+
+interface ScheduleGridProps {
+  schedule: WeeklySchedule;
+  isAdmin: boolean;
+  error: string | null;
+  openModal: (cls?: ScheduleClass, day?: string) => void;
+  openConfirmDelete: (id: number, documentId: string, day: string) => void;
+  formatTime: (time: string) => string;
+}
+
+const ScheduleGrid: React.FC<ScheduleGridProps> = ({
+  schedule,
+  isAdmin,
+  error,
+  openModal,
+  openConfirmDelete,
+  formatTime,
+}) => {
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const [selectedClass, setSelectedClass] = useState<{
+    id: string;
+    title: string;
+    time: string;
+    day: string;
+    ageGroup: string;
+  } | null>(null);
+
+  const { isSignedIn } = useUser();
+
+  const daysOfWeek = SCHEDULE_GRID_TWO.UI.DAYS_OF_WEEK;
+
+  const handleClassClick = (cls: ScheduleClass, day: string) => {
+    if (!isAdmin) {
+      setSelectedClass({
+        id: cls.documentId,
+        title: cls.name,
+        time: `${formatTime(cls.startTime)} - ${formatTime(cls.endTime)}`,
+        day,
+        ageGroup: SCHEDULE_GRID_TWO.UI.ALL_AGES_TEXT,
+      });
+      setIsPopupOpen(true);
+    } else {
+      openModal(cls, day);
+    }
+  };
+
+  return (
+    <>
+      <style jsx>{`
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
+
+        :root {
+          --jubilee: #f47c7c;
+          --natural-white: #f7f7f7;
+          --caviar: #2d2d2d;
+          --storm-cloud: #4a636e;
+          --exuberant-blue: #c71585;
+          --modern-purple: #d946ef;
+        }
+
+        * {
+          font-family: "Inter", system-ui, sans-serif;
+          box-sizing: border-box;
+        }
+
+        .schedule-container {
+          background: rgba(255, 255, 255, 0.1);
+          backdrop-filter: blur(12px);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          border-radius: 2rem;
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+          min-width: 0;
+        }
+
+        .day-header {
+          background: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee));
+          color: white;
+          border-radius: 0.5rem;
+          padding: 0.5rem;
+          font-size: 1.8rem;
+          text-align: center;
+          font-weight: bold;
+          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+        }
+
+        .schedule-text {
+          font-size: 2rem;
+          text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
+            0 2px 4px rgba(0, 0, 0, 0.4);
+          line-height: 1.4;
+          padding-bottom: 0.5rem;
+        }
+
+        .schedule-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-left: auto;
+          margin-right: auto;
+          margin-bottom: 1.5rem;
+        }
+
+        .schedule-card {
+          background: rgba(255, 255, 255, 0.12);
+          backdrop-filter: blur(10px);
+          hanging-punctuation: 1px solid rgba(255, 255, 255, 0.2);
+          border-radius: 1rem;
+          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+          min-width: 0;
+        }
+
+        @media (max-width: 1024px) {
+          .schedule-text {
+            font-size: 1.25rem;
+          }
+
+          .schedule-container {
+            padding: 1rem;
+          }
+
+          .schedule-card {
+            padding: 0.75rem;
+          }
+        }
+
+        @media (max-width: 640px) {
+          .schedule-text {
+            font-size: 1.125rem;
+          }
+
+          .schedule-container {
+            padding: 0.5rem;
+          }
+
+          .schedule-card {
+            padding: 0.5rem;
+            border-radius: 0.75rem;
+          }
+
+          .day-header {
+            padding: 0.4rem;
+            font-size: 1rem;
+          }
+
+          .schedule-header {
+            flex-direction: column;
+            align-items: flex-start;
+            margin-bottom: 1rem;
+          }
+
+          .schedule-header h2 {
+            margin-bottom: 0.5rem;
+          }
+        }
+
+        @media (max-width: 320px) {
+          .schedule-text {
+            font-size: 1rem;
+          }
+        }
+      `}</style>
+
+      <div className="mb-16 pt-12">
+        <div className="schedule-header">
+          <h2
+            className="text-2xl sm:text-3xl lg:text-4xl text-white font-black tracking-wide drop-shadow-md section-heading"
+            style={{
+              textShadow: `
+                -1px -1px 0 #000,
+                1px -1px 0 #000,
+                -1px 1px 0 #000,
+                1px 1px 0 #000,
+                0 2px 4px rgba(0, 0, 0, 0.4)
+              `,
+            }}
+          >
+            {SCHEDULE_GRID_TWO.UI.CLASS_SCHEDULE_HEADING}
+          </h2>
+
+          {isAdmin && (
+            <AddButton
+              onClick={() => openModal()}
+              className="mt-4"
+            >
+              {SCHEDULE_GRID_TWO.BUTTONS.ADD_NEW_CLASS_BUTTON}
+            </AddButton>
+          )}
+        </div>
+        {error ? (
+          <div className="text-center text-red-400 text-xl sm:text-2xl font-bold content-text">{error}</div>
+        ) : (
+          <div className="schedule-container rounded-[2rem] overflow-hidden p-6">
+            <div className="grid grid-cols-1 gap-4">
+              {daysOfWeek.map((day, index) => {
+                const classes = schedule[day] || [];
+                return (
+                  <div key={day} className="p-4 flex flex-col min-w-0">
+                    <h3
+                      className="text-lg font-bold text-white mb-3 text-center day-header content-text"
+                      style={{
+                        textShadow: `
+                          -1px -1px 0 #000,
+                          1px -1px 0 #000,
+                          -1px 1px 0 #000,
+                          1px 1px 0 #000,
+                          0 2px 4px rgba(0, 0, 0, 0.4)
+                        `,
+                      }}
+                    >
+                      {day}
+                    </h3>
+
+                    <ul className="space-y-3 font-medium flex-1">
+                      {classes.length > 0 ? (
+                        classes.map((cls) => (
+                          <li
+                            key={`${cls.startTime}-${cls.endTime}-${cls.id}`}
+                            className={`schedule-card p-3 border-none relative ${
+                              isAdmin ? "cursor-pointer hover:bg-blue-600/20" : "cursor-pointer hover:bg-blue-600/20"
+                            }`}
+                            onClick={() => handleClassClick(cls, day)}
+                            role="button"
+                            tabIndex={0}
+                            onKeyDown={(e) => {
+                              if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                handleClassClick(cls, day);
+                              }
+                            }}
+                          >
+                            <div className="flex flex-col space-y-1">
+                              <span className="font-semibold text-[#ff48bc] schedule-text">{cls.name}</span>
+                              <div className="flex flex-col text-white schedule-text">
+                                <span>
+                                  {formatTime(cls.startTime)} - {formatTime(cls.endTime)}
+                                </span>
+                              </div>
+                              {isAdmin && (
+                                <DeleteIconButton
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    openConfirmDelete(cls.id, cls.documentId, day);
+                                  }}
+                                  aria-label={SCHEDULE_GRID_TWO.UI.DELETE_BUTTON_ARIA.replace("${cls.name}", cls.name)}
+                                />
+                              )}
+                            </div>
+                          </li>
+                        ))
+                      ) : (
+                        <li className="text-center text-white schedule-text">{SCHEDULE_GRID_TWO.UI.NO_CLASSES_MESSAGE}</li>
+                      )}
+                    </ul>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+        <div className="mt-6 text-center">
+          <p className="text-md content-text">
+            {SCHEDULE_GRID_TWO.UI.COMPLIMENTARY_CLASS_TEXT}
+            <a href={`tel:${SCHEDULE_GRID_TWO.UI.PHONE_NUMBER}`} className="font-semibold">
+              {SCHEDULE_GRID_TWO.UI.PHONE_NUMBER}
+            </a>
+            .
+          </p>
+          <p className="mt-2 text-md italic content-text">
+            {SCHEDULE_GRID_TWO.UI.SCHEDULE_DISCLAIMER}
+          </p>
+        </div>
+
+        <ClassPopup
+          isOpen={isPopupOpen}
+          onClose={() => {
+            setIsPopupOpen(false);
+            setSelectedClass(null);
+          }}
+          classDetails={selectedClass}
+        />
+      </div>
+    </>
+  );
+};
+
+export default ScheduleGrid;

package/components/addOns/functional/schedules/ScheduleGridTwoBasic.tsx

@@ -0,0 +1,289 @@
+// src/pages/ScheduleGridTwoBasic.tsx
+"use client";
+
+import React, { useState } from "react";
+import { AddButton, DeleteIconButton } from "@/components/other/button";
+import { ScheduleClass, WeeklySchedule } from "@/components/types";
+import { useUser } from "@clerk/nextjs";
+import { SCHEDULE_GRID_TWO_BASIC } from "./constants/ScheduleGridTwoBasic";
+
+interface ScheduleGridProps {
+  schedule: WeeklySchedule;
+  isAdmin: boolean;
+  error: string | null;
+  openModal: (cls?: ScheduleClass, day?: string) => void;
+  openConfirmDelete: (id: number, documentId: string, day: string) => void;
+  formatTime: (time: string) => string;
+}
+
+const ScheduleGrid: React.FC<ScheduleGridProps> = ({
+  schedule,
+  isAdmin,
+  error,
+  openModal,
+  openConfirmDelete,
+  formatTime,
+}) => {
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const [selectedClass, setSelectedClass] = useState<{
+    id: string;
+    title: string;
+    time: string;
+    day: string;
+    ageGroup: string;
+  } | null>(null);
+
+  const { isSignedIn } = useUser();
+
+  const daysOfWeek = SCHEDULE_GRID_TWO_BASIC.UI.DAYS_OF_WEEK;
+
+  const handleClassClick = (cls: ScheduleClass, day: string) => {
+    if (!isAdmin) {
+      setSelectedClass({
+        id: cls.documentId,
+        title: cls.name,
+        time: `${formatTime(cls.startTime)} - ${formatTime(cls.endTime)}`,
+        day,
+        ageGroup: SCHEDULE_GRID_TWO_BASIC.UI.ALL_AGES_TEXT,
+      });
+      setIsPopupOpen(true);
+    } else {
+      openModal(cls, day);
+    }
+  };
+
+  return (
+    <>
+      <style jsx>{`
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
+
+        :root {
+          --jubilee: #f47c7c;
+          --natural-white: #f7f7f7;
+          --caviar: #2d2d2d;
+          --storm-cloud: #4a636e;
+          --exuberant-blue: #c71585;
+          --modern-purple: #d946ef;
+        }
+
+        * {
+          font-family: "Inter", system-ui, sans-serif;
+          box-sizing: border-box;
+        }
+
+        .schedule-container {
+          background: rgba(255, 255, 255, 0.1);
+          backdrop-filter: blur(12px);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          border-radius: 2rem;
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+          min-width: 0;
+        }
+
+        .day-header {
+          background: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee));
+          color: white;
+          border-radius: 0.5rem;
+          padding: 0.5rem;
+          font-size: 1.8rem;
+          text-align: center;
+          font-weight: bold;
+          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+        }
+
+        .schedule-text {
+          font-size: 2rem;
+          text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
+            0 2px 4px rgba(0, 0, 0, 0.4);
+          line-height: 1.4;
+          padding-bottom: 0.5rem;
+        }
+
+        .schedule-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-left: auto;
+          margin-right: auto;
+          margin-bottom: 1.5rem;
+        }
+
+        .schedule-card {
+          background: rgba(255, 255, 255, 0.12);
+          backdrop-filter: blur(10px);
+          hanging-punctuation: 1px solid rgba(255, 255, 255, 0.2);
+          border-radius: 1rem;
+          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+          min-width: 0;
+        }
+
+        .schedule-card:hover {
+          background: #f48fb1;
+        }
+
+        @media (max-width: 1024px) {
+          .schedule-text {
+            font-size: 1.25rem;
+          }
+
+          .schedule-container {
+            padding: 1rem;
+          }
+
+          .schedule-card {
+            padding: 0.75rem;
+          }
+        }
+
+        @media (max-width: 640px) {
+          .schedule-text {
+            font-size: 1.125rem;
+          }
+
+          .schedule-container {
+            padding: 0.5rem;
+          }
+
+          .schedule-card {
+            padding: 0.5rem;
+            border-radius: 0.75rem;
+          }
+
+          .day-header {
+            padding: 0.4rem;
+            font-size: 1rem;
+          }
+
+          .schedule-header {
+            flex-direction: column;
+            align-items: flex-start;
+            margin-bottom: 1rem;
+          }
+
+          .schedule-header h2 {
+            margin-bottom: 0.5rem;
+          }
+        }
+
+        @media (max-width: 320px) {
+          .schedule-text {
+            font-size: 1rem;
+          }
+        }
+      `}</style>
+
+      <div className="mb-16 pt-12">
+        <div className="schedule-header">
+          <h2
+            className="text-2xl sm:text-3xl lg:text-6xl text-white font-black tracking-wide drop-shadow-md section-heading"
+            style={{
+              textShadow: `
+                -1px -1px 0 #000,
+                1px -1px 0 #000,
+                -1px 1px 0 #000,
+                1px 1px 0 #000,
+                0 2px 4px rgba(0, 0, 0, 0.4)
+              `,
+            }}
+          >
+            {SCHEDULE_GRID_TWO_BASIC.UI.CLASS_SCHEDULE_HEADING}
+          </h2>
+
+          {isAdmin && (
+            <AddButton
+              onClick={() => openModal()}
+              className="mt-4"
+            >
+              {SCHEDULE_GRID_TWO_BASIC.BUTTONS.ADD_NEW_CLASS_BUTTON}
+            </AddButton>
+          )}
+        </div>
+        {error ? (
+          <div className="text-center text-red-400 text-xl sm:text-2xl font-bold content-text">{error}</div>
+        ) : (
+          <div className="schedule-container rounded-[2rem] overflow-hidden p-6">
+            <div className="grid grid-cols-1 gap-4">
+              {daysOfWeek.map((day, index) => {
+                const classes = schedule[day] || [];
+                return (
+                  <div key={day} className="p-4 flex flex-col min-w-0">
+                    <h3
+                      className="text-lg font-bold text-white mb-3 text-center day-header content-text"
+                      style={{
+                        textShadow: `
+                          -1px -1px 0 #000,
+                          1px -1px 0 #000,
+                          -1px 1px 0 #000,
+                          1px 1px 0 #000,
+                          0 2px 4px rgba(0, 0, 0, 0.4)
+                        `,
+                      }}
+                    >
+                      {day}
+                    </h3>
+
+                    <ul className="space-y-3 font-medium flex-1">
+                      {classes.length > 0 ? (
+                        classes.map((cls) => (
+                          <li
+                            key={`${cls.startTime}-${cls.endTime}-${cls.id}`}
+                            className={`schedule-card p-3 border-none relative ${isAdmin ? "cursor-pointer hover:bg-blue-600/20" : "cursor-default"}`}
+                            onClick={() => {
+                              if (isAdmin) handleClassClick(cls, day);
+                            }}
+                            role={isAdmin ? "button" : undefined}
+                            tabIndex={isAdmin ? 0 : -1}
+                            onKeyDown={(e) => {
+                              if (isAdmin && (e.key === "Enter" || e.key === " ")) {
+                                e.preventDefault();
+                                handleClassClick(cls, day);
+                              }
+                            }}
+                          >
+                            <div className="flex flex-col space-y-1">
+                              <span className="font-semibold text-[#ff48bc] schedule-text">{cls.name}</span>
+                              <div className="flex flex-col text-white schedule-text">
+                                <span>
+                                  {formatTime(cls.startTime)} - {formatTime(cls.endTime)}
+                                </span>
+                              </div>
+                              {isAdmin && (
+                                <DeleteIconButton
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    openConfirmDelete(cls.id, cls.documentId, day);
+                                  }}
+                                  aria-label={SCHEDULE_GRID_TWO_BASIC.UI.DELETE_BUTTON_ARIA.replace("${cls.name}", cls.name)}
+                                />
+                              )}
+                            </div>
+                          </li>
+                        ))
+                      ) : (
+                        <li className="text-center text-white schedule-text">{SCHEDULE_GRID_TWO_BASIC.UI.NO_CLASSES_MESSAGE}</li>
+                      )}
+                    </ul>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+        <div className="mt-6 text-center">
+          <p className="text-md content-text">
+            {SCHEDULE_GRID_TWO_BASIC.UI.COMPLIMENTARY_CLASS_TEXT}
+            <a href={`tel:${SCHEDULE_GRID_TWO_BASIC.UI.PHONE_NUMBER}`} className="font-semibold">
+              {SCHEDULE_GRID_TWO_BASIC.UI.PHONE_NUMBER}
+            </a>
+            .
+          </p>
+          <p className="mt-2 text-md italic content-text">
+            {SCHEDULE_GRID_TWO_BASIC.UI.SCHEDULE_DISCLAIMER}
+          </p>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ScheduleGrid;