add countdown to warn the user about data reset

import type { Metadata } from "next";

import VerticalDivider from "@/components/Vertical-divider";

import Sidebar from "@/components/Sidebar";

import ResetCountdown from "@/components/resetCountdown";

export const metadata: Metadata = {

  title: "Admin Dashboard",

        <VerticalDivider />

        {children}

      </main>

      <ResetCountdown />

    </>

  );

}

   #countdown-container {

       position: fixed;

       top: 5%;

       right: 5%;

       padding: 10px;

   }

 No newline at end of file

import './ResetCountdown.css';

import ResetCountdownClient from './resetCountdownClient';

export default async function ResetCountdown() {

    const demo = process.env.DEMO === 'true';

    if (demo) {

        return <ResetCountdownClient />;

    }

    else {

        return <></>;

    }

}

'use client';

import { useEffect, useState } from 'react';

export default function ResetCountdownClient() {

    const [minutesLeft, setMinutesLeft] = useState(0);

    useEffect(() => {

        const updateCountdown = () => {

            const now = new Date();

            const nextHour = new Date();

            nextHour.setHours(now.getHours() + 1, 0, 0, 0); // top of next hour

            const diffMs = nextHour.getTime() - now.getTime();

            const minutes = Math.floor(diffMs / 1000 / 60);

            setMinutesLeft(minutes);

        };

        updateCountdown(); // call once immediately

        const interval = setInterval(updateCountdown, 1000); // update every second

        return () => clearInterval(interval); // clean up on unmount

    }, []);

    return <>

        <div id="countdown-container" className='bg-warning-subtle'>

            <p>this is a demo app, a reset is planned every hour.</p>

            <p className='minutesLeft text-warning'>{minutesLeft} minute{minutesLeft !== 1 ? 's' : ''} left until the content is reset.</p>

        </div>

    </>;

}