40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
|
|
interface CountdownTimerProps {
|
|
initialSeconds: number;
|
|
onComplete?: () => void;
|
|
}
|
|
|
|
export function CountDownTimer({
|
|
initialSeconds,
|
|
onComplete,
|
|
}: CountdownTimerProps) {
|
|
const [secondsLeft, setSecondsLeft] = useState(initialSeconds);
|
|
|
|
useEffect(() => {
|
|
setSecondsLeft(initialSeconds);
|
|
}, [initialSeconds]);
|
|
|
|
useEffect(() => {
|
|
if (secondsLeft <= 0) {
|
|
onComplete?.();
|
|
return;
|
|
}
|
|
const timer = setInterval(() => {
|
|
setSecondsLeft((prev) => prev - 1);
|
|
}, 1000);
|
|
return () => clearInterval(timer);
|
|
}, [secondsLeft, onComplete]);
|
|
|
|
const toPersianDigits = (str: string) =>
|
|
str.replace(/\d/g, (d: string) => '۰۱۲۳۴۵۶۷۸۹'[parseInt(d)]);
|
|
|
|
const formatTime = (totalSeconds: number) => {
|
|
const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0');
|
|
const seconds = String(totalSeconds % 60).padStart(2, '0');
|
|
return toPersianDigits(`${minutes}:${seconds}`);
|
|
};
|
|
|
|
return <span>{formatTime(secondsLeft)}</span>;
|
|
}
|