anix/feat: add schedule modal to discovery page

app/api/config.ts

@@ -81,5 +81,6 @@ export const ENDPOINTS = {
     watching: `${API_PREFIX}/discover/watching`,
     recommendations: `${API_PREFIX}/discover/recommendations`,
     collections: `${API_PREFIX}/collection/all`,
+    schedule: `${API_PREFIX}/schedule`,
   }
 };

app/components/Discovery/Modal/ScheduleModal.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { ENDPOINTS } from "#/api/config";
+import { useSWRfetcher } from "#/api/utils";
+import useSWR from "swr";
+import { Modal, ModalBody, ModalHeader } from "flowbite-react";
+import { Spinner } from "#/components/Spinner/Spinner";
+import { ReleaseCourusel } from "#/components/ReleaseCourusel/ReleaseCourusel";
+type ModalProps = {
+  isOpen: boolean;
+  setIsOpen: (value: boolean) => void;
+};
+
+export const ScheduleModal = ({ isOpen, setIsOpen }: ModalProps) => {
+  const { data, isLoading, error } = useSWR(
+    ENDPOINTS.discover.schedule,
+    useSWRfetcher,
+    {
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+      revalidateOnReconnect: false,
+    }
+  );
+
+  return (
+    <Modal
+      show={isOpen}
+      onClose={() => setIsOpen(false)}
+      size="7xl"
+      dismissible
+    >
+      <ModalHeader>Расписание</ModalHeader>
+      <ModalBody>
+        {!error ?
+          isLoading ?
+            <div className="flex items-center justify-center w-full h-64">
+              <Spinner />
+            </div>
+          : <div className="flex flex-col gap-4">
+              <ReleaseCourusel
+                content={data.monday}
+                sectionTitle={"Понедельник"}
+              />
+              <ReleaseCourusel
+                content={data.tuesday}
+                sectionTitle={"Вторник"}
+              />
+              <ReleaseCourusel
+                content={data.wednesday}
+                sectionTitle={"Среда"}
+              />
+              <ReleaseCourusel
+                content={data.thursday}
+                sectionTitle={"Четверг"}
+              />
+              <ReleaseCourusel content={data.friday} sectionTitle={"Пятница"} />
+              <ReleaseCourusel
+                content={data.saturday}
+                sectionTitle={"Суббота"}
+              />
+              <ReleaseCourusel
+                content={data.sunday}
+                sectionTitle={"Воскресенье"}
+              />
+            </div>
+
+        : "Ошибка загрузки"}
+      </ModalBody>
+    </Modal>
+  );
+};

app/pages/Discover.tsx

@@ -3,6 +3,7 @@ import { CollectionsOfTheWeek } from "#/components/Discovery/CollectionsOfTheWee
 import { DiscussingToday } from "#/components/Discovery/DiscussingToday";
 import { InterestingCarousel } from "#/components/Discovery/InterestingCarousel";
 import { PopularModal } from "#/components/Discovery/Modal/PopularModal";
+import { ScheduleModal } from "#/components/Discovery/Modal/ScheduleModal";
 import { RecommendedCarousel } from "#/components/Discovery/RecommendedCarousel";
 import { WatchingNowCarousel } from "#/components/Discovery/WatchingNowCarousel";
 import { Button } from "flowbite-react";
@@ -12,6 +13,7 @@ import { useState } from "react";
 export const DiscoverPage = () => {
   const router = useRouter();
   const [PopularModalOpen, setPopularModalOpen] = useState(false);
+  const [ScheduleModalOpen, setScheduleModalOpen] = useState(false);
 
   return (
     <>
@@ -25,7 +27,11 @@ export const DiscoverPage = () => {
           <span className="flex-shrink-0 inline-block w-8 h-8 mr-2 iconify mdi--fire"></span>
           <span>Популярное</span>
         </Button>
-        <Button size="xl" color="blue">
+        <Button
+          size="xl"
+          color="blue"
+          onClick={() => setScheduleModalOpen(true)}
+        >
           <span className="flex-shrink-0 inline-block w-8 h-8 mr-2 iconify mdi--calendar-month"></span>
           <span>Расписание</span>
         </Button>
@@ -48,6 +54,10 @@ export const DiscoverPage = () => {
       <CollectionsOfTheWeek />
 
       <PopularModal isOpen={PopularModalOpen} setIsOpen={setPopularModalOpen} />
+      <ScheduleModal
+        isOpen={ScheduleModalOpen}
+        setIsOpen={setScheduleModalOpen}
+      />
     </>
   );
 };