From 7327a69b55a20b99b14ee0803d6cf5f8b88c45ef Mon Sep 17 00:00:00 2001
From: Factiven <factiven.org@gmail.com>
Date: Wed, 13 Sep 2023 00:45:53 +0700
Subject: Update v4 - Merge pre-push to main (#71)

* Create build-test.yml

* initial v4 commit

* update: github workflow

* update: push on branch

* Update .github/ISSUE_TEMPLATE/bug_report.md

* configuring next.config.js file
---
 components/home/schedule.js | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

(limited to 'components/home/schedule.js')

diff --git a/components/home/schedule.js b/components/home/schedule.js
index 4043c5e..a9846a7 100644
--- a/components/home/schedule.js
+++ b/components/home/schedule.js
@@ -1,17 +1,23 @@
 import Image from "next/image";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { convertUnixToTime } from "../../utils/getTimes";
 import { PlayIcon } from "@heroicons/react/20/solid";
 import { BackwardIcon, ForwardIcon } from "@heroicons/react/24/solid";
 import Link from "next/link";
+import { useCountdown } from "../../utils/useCountdownSeconds";
 
-export default function Schedule({ data, scheduleData, time }) {
+export default function Schedule({ data, scheduleData, anime, update }) {
   let now = new Date();
   let currentDay =
     now.toLocaleString("default", { weekday: "long" }).toLowerCase() +
     "Schedule";
   currentDay = currentDay.replace("Schedule", "");
 
+  const [day, hours, minutes, seconds] = useCountdown(
+    anime[0]?.airingSchedule.nodes[0]?.airingAt * 1000 || Date.now(),
+    update
+  );
+
   const [currentPage, setCurrentPage] = useState(0);
   const [days, setDay] = useState();
 
@@ -37,8 +43,6 @@ export default function Schedule({ data, scheduleData, time }) {
     setCurrentPage(todayIndex >= 0 ? todayIndex : 0);
   }, [currentDay, days]);
 
-  // console.log({ scheduleData });
-
   return (
     <div className="flex flex-col gap-5 px-4 lg:px-0">
       <h1 className="font-bold font-karla text-[20px] lg:px-5">
@@ -46,7 +50,7 @@ export default function Schedule({ data, scheduleData, time }) {
       </h1>
       <div className="rounded mb-5 shadow-md shadow-black">
         <div className="overflow-hidden w-full h-[96px] lg:h-[10rem] rounded relative">
-          <div className="absolute flex flex-col justify-center pl-5 lg:pl-16 rounded z-20 bg-gradient-to-r from-30% from-[#0c0c0c] to-transparent w-full h-full">
+          <div className="absolute flex flex-col justify-center pl-5 lg:pl-16 rounded z-20 bg-gradient-to-r from-30% from-tersier to-transparent w-full h-full">
             <h1 className="text-xs lg:text-lg">Coming Up Next!</h1>
             <div className="w-1/2 lg:w-2/5 hidden lg:block font-medium font-karla leading-[2.9rem] text-white line-clamp-1">
               <Link
@@ -62,15 +66,15 @@ export default function Schedule({ data, scheduleData, time }) {
           </div>
           {data.bannerImage ? (
             <Image
-              src={data.bannerImage || data.coverImage.large}
+              src={data.bannerImage || data.coverImage.extraLarge}
               width={500}
               height={500}
               alt="banner next anime"
-              className="absolute z-10 top-0 right-0 w-3/4 h-full object-cover brightness-[30%]"
+              className="absolute z-10 top-0 right-0 w-3/4 h-full object-cover opacity-30"
             />
           ) : (
             <Image
-              src={data.coverImage.large}
+              src={data.coverImage.extraLarge}
               width={500}
               height={500}
               sizes="100vw"
@@ -87,22 +91,22 @@ export default function Schedule({ data, scheduleData, time }) {
             <div className="flex items-center gap-2 md:gap-5 font-bold font-karla text-sm md:text-xl">
               {/* Countdown Timer */}
               <div className="flex flex-col items-center">
-                <span className="text-action/80">{time.days}</span>
+                <span className="text-action/80">{day}</span>
                 <span className="text-sm lg:text-base font-medium">Days</span>
               </div>
               <span></span>
               <div className="flex flex-col items-center">
-                <span className="text-action/80">{time.hours}</span>
+                <span className="text-action/80">{hours}</span>
                 <span className="text-sm lg:text-base font-medium">Hours</span>
               </div>
               <span></span>
               <div className="flex flex-col items-center">
-                <span className="text-action/80">{time.minutes}</span>
+                <span className="text-action/80">{minutes}</span>
                 <span className="text-sm lg:text-base font-medium">Mins</span>
               </div>
               <span></span>
               <div className="flex flex-col items-center">
-                <span className="text-action/80">{time.seconds}</span>
+                <span className="text-action/80">{seconds}</span>
                 <span className="text-sm lg:text-base font-medium">Secs</span>
               </div>
             </div>
-- 
cgit v1.2.3