45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { View, Text } from 'react-native';
|
|
import { useAppTheme } from '@theme';
|
|
import { getStyles } from './countdownTimer.styles';
|
|
|
|
interface CountdownTimerProps {
|
|
durationSeconds: number;
|
|
onExpire: () => void;
|
|
color?: string;
|
|
}
|
|
|
|
export const CountdownTimer: React.FC<CountdownTimerProps> = ({
|
|
durationSeconds,
|
|
onExpire,
|
|
color,
|
|
}) => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const [timeLeft, setTimeLeft] = useState(durationSeconds);
|
|
|
|
useEffect(() => {
|
|
if (timeLeft <= 0) {
|
|
onExpire();
|
|
return;
|
|
}
|
|
|
|
const timer = setInterval(() => {
|
|
setTimeLeft((prev) => prev - 1);
|
|
}, 1000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, [timeLeft, onExpire]);
|
|
|
|
const progressColor = color || colors.primary;
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={[styles.outerCircle, { borderColor: progressColor }]}>
|
|
<Text style={[styles.timerText, { color: progressColor }]}>{timeLeft}s</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
export default CountdownTimer;
|