add: close show next airing episode box

ShivaBhattacharjee · Mar 15, 2024 · 5cd1ad0 · 5cd1ad0
1 parent 91701aa
commit 5cd1ad0
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/src/app/watch/[streamid]/[animeid]/page.tsx b/src/app/watch/[streamid]/[animeid]/page.tsx
@@ -11,6 +11,7 @@ import CharactersLoading from "@/components/loading/CharactersLoading";
 import EpisodeLoading from "@/components/loading/EpisodeLoading";
 import RecommendedLoading from "@/components/loading/RecommendedLoading";
 import RelationLoading from "@/components/loading/RelationLoading";
+import NextAiringEpisode from "@/components/NextAiringEpisode";
 import CharacterCard from "@/components/shared/cards/characterCard";
 import EpisodeLists from "@/components/shared/cards/EpisodeLists";
 import RelationCard from "@/components/shared/cards/RelationCard";
@@ -117,11 +118,7 @@ const Page = async ({
                                         Report
                                     </a>
                                 </div>
-                                {details.nextAiringEpisode !== undefined && (
-                                    <span className="bg-white  text-md mt-4 text-black md:w-96 w-full  font-bold text-center p-3 rounded-lg">
-                                        Episode {details?.nextAiringEpisode?.episode} expected on {formattedAiringDate}
-                                    </span>
-                                )}
+                                {details.nextAiringEpisode !== undefined && <NextAiringEpisode nextAiringEpisode={details?.nextAiringEpisode?.episode} formattedAiringDate={formattedAiringDate} />}
 
                                 <div className="flex gap-3 w-full mt-5">
                                     <img src={details?.image} alt={`an image of ${params?.streamid}`} className=" w-40 md:w-44 rounded-lg" />

diff --git a/src/components/NextAiringEpisode.tsx b/src/components/NextAiringEpisode.tsx
@@ -0,0 +1,30 @@
+"use client";
+import React, { useCallback, useMemo, useState } from "react";
+import { X } from "lucide-react";
+interface NextAiringEpisodeProps {
+    nextAiringEpisode: {
+        episode: number;
+    } | null;
+    formattedAiringDate: string;
+}
+
+const NextAiringEpisode: React.FC<NextAiringEpisodeProps> = ({ nextAiringEpisode, formattedAiringDate }) => {
+    const initialCloseState = useMemo(() => false, []);
+    const [close, setClose] = useState<boolean>(initialCloseState);
+
+    const handleClose = useCallback(() => {
+        setClose((prevClose) => !prevClose);
+    }, []);
+    return (
+        <>
+            {!close && (
+                <span className="bg-white flex relative justify-between items-center lg:text-lg text-md mt-4 text-black  w-full  font-bold text-center p-4 rounded-lg">
+                    Episode {nextAiringEpisode?.episode} expected on {formattedAiringDate}
+                    <X onClick={handleClose} className=" absolute md:top-2 cursor-pointer top-1 md:right-4 right-2" />
+                </span>
+            )}
+        </>
+    );
+};
+
+export default NextAiringEpisode;