redesign: Redesign schedules page (#112)

* Remove trailing commas

* Polish schedules page & Remove unneeded styles

* Add scroll animations

* Add scrolling animation to time view

* Refactor schedule page layout and styling

---------

Co-authored-by: Factiven <[email protected]>

2 files changed, 55 insertions, 25 deletions

diff --git a/.prettierrc.json b/.prettierrc.json
index 08df606..08f9b57 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,4 +1,5 @@
 {
   "bracketSpacing": true,
-  "printWidth": 80
+  "printWidth": 80,
+  "trailingComma": "none"
 }
diff --git a/pages/en/schedule/index.tsx b/pages/en/schedule/index.tsx
index 42a28c6..f116b7c 100644
--- a/pages/en/schedule/index.tsx
+++ b/pages/en/schedule/index.tsx
@@ -1,6 +1,7 @@
 // @ts-nocheck
 
 import Image from "next/image";
+import { cubicBezier, motion } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { CalendarIcon } from "@heroicons/react/24/solid";
@@ -11,7 +12,7 @@ import {
   filterFormattedSchedule,
   filterScheduleByDay,
   sortScheduleByDay,
-  transformSchedule,
+  transformSchedule
 } from "@/utils/schedulesUtils";
 
 import { scheduleQuery } from "@/lib/graphql/query";
@@ -28,7 +29,7 @@ const day = [
   "Wednesday",
   "Thursday",
   "Friday",
-  "Saturday",
+  "Saturday"
 ];
 
 const isAired = (timestamp: number | null) => {
@@ -68,9 +69,9 @@ export async function getServerSideProps() {
 
     return {
       props: {
-        schedule: scheduleByDay,
+        schedule: scheduleByDay
         // today: todaySchedule,
-      },
+      }
     };
   } else {
     now.setHours(0, 0, 0, 0); // Set the time to 00:00:00.000
@@ -88,16 +89,16 @@ export async function getServerSideProps() {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          Accept: "application/json",
+          Accept: "application/json"
         },
         body: JSON.stringify({
           query: scheduleQuery,
           variables: {
             weekStart,
             weekEnd,
-            page,
-          },
-        }),
+            page
+          }
+        })
       });
 
       const json = await res.json();
@@ -113,7 +114,7 @@ export async function getServerSideProps() {
 
     const timestampToDay = (timestamp: number) => {
       return new Date(timestamp * 1000).toLocaleDateString(undefined, {
-        weekday: "long",
+        weekday: "long"
       });
     };
 
@@ -137,9 +138,9 @@ export async function getServerSideProps() {
 
     return {
       props: {
-        schedule: scheduleByDay,
+        schedule: scheduleByDay
         // today: todaySchedule,
-      },
+      }
     };
   }
   // setSchedule(scheduleByDay);
@@ -267,11 +268,11 @@ export default function Schedule({ schedule }: any) {
       <MobileNav hideProfile={true} />
       <Navbar scrollP={10} toTop={true} />
       <div className="w-screen">
-        <span className="absolute z-20 top-0 left-0 w-screen h-[190px] lg:h-[250px] bg-secondary overflow-hidden">
-          <div className="absolute top-40 lg:top-36 w-full h-full bg-primary rounded-t-3xl xl:rounded-t-[50px]" />
-        </span>
-        <div className="flex flex-col mx-auto my-10 w-full mt-16 lg:mt-24 max-w-screen-2xl gap-5 md:gap-10 z-30">
-          <div className="flex flex-col lg:flex-row gap-2 justify-between z-20 px-3">
+        {/* <span className="absolute w-screen h-[190px] lg:h-[250px] bg-white overflow-hidden">
+          <div className="w-full h-full bg-white rounded" />
+        </span> */}
+        <div className="flex flex-col mx-auto my-10 w-full mt-16 lg:mt-24 max-w-screen-2xl gap-10">
+          <div className="flex flex-col lg:flex-row gap-2 justify-between px-5">
             <ul
               ref={scrollContainerRef}
               className="flex overflow-x-scroll cust-scroll items-center gap-5 font-karla text-2xl font-semibold"
@@ -327,13 +328,27 @@ export default function Schedule({ schedule }: any) {
                 <div
                   key={`section_${day}`}
                   // id={`same_${day}`}
-                  className="flex flex-col gap-5 z-50 px-3"
+                  className="grid gap-5 px-5"
                 >
-                  <h2 className="font-bold font-outfit text-white text-2xl z-[250]">
+                  <h2 className="font-bold font-outfit text-white text-2xl">
                     {day}
                   </h2>
                   {Object.entries(timeSlots).map(([time, animeList]) => (
-                    <div
+                    <motion.div
+                      initial={{
+                        y: 30,
+                        opacity: 0
+                      }}
+                      whileInView={{
+                        y: 0,
+                        opacity: 1
+                      }}
+                      transition={{
+                        duration: 0.5,
+                        delay: 0.2,
+
+                        ease: cubicBezier(0.35, 0.17, 0.3, 0.86)
+                      }}
                       key={time}
                       // id={`same_${time}`}
                       className="relative space-y-2"
@@ -358,7 +373,7 @@ export default function Schedule({ schedule }: any) {
                                 key={m.id}
                                 // id={`same_${m.id}`}
                                 href={`/en/${m.type.toLowerCase()}/${m.id}`}
-                                className={`flex bg-secondary rounded group cursor-pointer overflow-hidden ml-4 z-50`}
+                                className={`flex bg-secondary rounded group cursor-pointer overflow-hidden ml-4`}
                               >
                                 <Image
                                   src={m.coverImage.extraLarge}
@@ -387,7 +402,7 @@ export default function Schedule({ schedule }: any) {
                           );
                         })}
                       </div>
-                    </div>
+                    </motion.div>
                   ))}
                 </div>
               ))
@@ -402,7 +417,7 @@ export default function Schedule({ schedule }: any) {
                 <div
                   key={`section2_${day}`}
                   // id={`same_${day}`}
-                  className="flex flex-col gap-5 px-3 z-50"
+                  className="flex flex-col gap-5 px-5 lg:px-10"
                 >
                   <h2
                     // id={day}
@@ -410,7 +425,21 @@ export default function Schedule({ schedule }: any) {
                   >
                     {day}
                   </h2>
-                  <div className="w-full grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 md:gap-7 grid-flow-row">
+                  <motion.div
+                    initial={{
+                      y: 30,
+                      opacity: 0
+                    }}
+                    whileInView={{
+                      y: 0,
+                      opacity: 1
+                    }}
+                    transition={{
+                      duration: 0.5,
+                      ease: cubicBezier(0.35, 0.17, 0.3, 0.86)
+                    }}
+                    className="w-full grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-5 sm:gap-4 grid-flow-row"
+                  >
                     {schedules.map((s) => {
                       const m = s.media;
 
@@ -470,7 +499,7 @@ export default function Schedule({ schedule }: any) {
                         </Link>
                       );
                     })}
-                  </div>
+                  </motion.div>
                 </div>
               )
             )