test: dynamic variable

src/app/page.tsx

@@ -1,11 +1,13 @@
 "use client"
+
+import { use, useEffect, useState } from "react"
 import { getSeasonalAnimes } from "@/services/getSeasonalAnimes"
 
 import DailyAnime from "@/components/DailyAnime"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
-export default async function Page() {
-	const animes = await getSeasonalAnimes()
+export default function Page() {
+	// const animes = use(getSeasonalAnimes())
 	const days = [
 		"sundays",
 		"mondays",
@@ -25,12 +27,35 @@ export default async function Page() {
 		return `${currentHour}:${currentMinute}:${currentSecond}`
 	}
 
+	const [currentTime, setCurrentTime] = useState("")
+
+	const getCurrentTime = () => {
+		const currentDate = new Date()
+		const currentHour = currentDate.getHours()
+		const currentMinute = currentDate.getMinutes()
+		const currentSecond = currentDate.getSeconds()
+		return `${currentHour}:${currentMinute}:${currentSecond}`
+	}
+
+	useEffect(() => {
+		// Set the initial time when the component mounts
+		setCurrentTime(getCurrentTime())
+
+		// Update the time every second when the component mounts
+		const intervalId = setInterval(() => {
+			setCurrentTime(getCurrentTime())
+		}, 1000)
+
+		// Clean up the interval when the component unmounts
+		return () => clearInterval(intervalId)
+	}, [])
+
 	return (
 		<main className="flex flex-col items-center justify-center ">
 			<h1 className="mt-5 text-2xl font-bold">ANIME OF THE DAY 👺</h1>
-			<p>{timer()}</p>
-			<Tabs
-				defaultValue={currentDay}
+			<p>{currentTime}</p>
+			{/* <Tabs
+				// defaultValue={currentDay}
 				className=" mt-5 flex flex-col items-center"
 			>
 				<TabsList slot="mondays">
@@ -63,7 +88,7 @@ export default async function Page() {
 				<TabsContent value="sundays">
 					<DailyAnime animes={animes} day="sundays" />
 				</TabsContent>
-			</Tabs>
+			</Tabs> */}
 			<div className="absolute bottom-5 flex w-full justify-evenly">
 				<p className="text-center text-sm text-gray-500">
 					Made with ❤️ by {/* on click open new page */}

src/services/getSeasonalAnimes.tsx

@@ -1,8 +1,8 @@
 import { Anime } from "@/types/anime"
 
 export async function getSeasonalAnimes(): Promise<Anime[]> {
-	const res = await fetch("https://api.jikan.moe/v4/seasons/now")
-	const output = await res.json()
-	return output.data
+	return await (await fetch("https://api.jikan.moe/v4/seasons/now", {
+		cache: "no-store",
+	})).json()
 }