ba-cafe

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

CountdownDisplay.tsx (926B)

      1 "use client";
      2 
      3 export const runtime = "edge";
      4 
      5 import { useMemo } from 'react';
      6 import { Lekton } from "next/font/google";
      7 const LektonFont = Lekton({ weight: "700", subsets: ["latin"] });
      8 
      9 interface CountdownDisplayProps {
     10   milliseconds: number;
     11 }
     12 
     13 export default function CountdownDisplay({ milliseconds }: CountdownDisplayProps) {
     14   const { hours, minutes, seconds } = useMemo(() => {
     15     const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
     16     const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
     17     const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
     18     const seconds = String(totalSeconds % 60).padStart(2, '0');
     19     return { hours, minutes, seconds };
     20   }, [milliseconds]);
     21 
     22   return (
     23     <div className={`countdown-text ${LektonFont.className}`}>
     24       <span>{hours}</span>:
     25       <span>{minutes}</span>:
     26       <span>{seconds}</span>
     27     </div>
     28   );
     29 }