93 lines
2.4 KiB
TypeScript
93 lines
2.4 KiB
TypeScript
|
import React, { useState, useEffect } from 'react';
|
||
|
import { StyleSheet } from 'react-native';
|
||
|
import { ThemedText } from '@/components/ThemedText';
|
||
|
import { ThemedView } from '@/components/ThemedView';
|
||
|
|
||
|
|
||
|
export default function TabTwoScreen() {
|
||
|
const [countdown, setCountdown] = useState({
|
||
|
days: 0,
|
||
|
hours: 0,
|
||
|
minutes: 0,
|
||
|
seconds: 0,
|
||
|
});
|
||
|
|
||
|
const targetDate = new Date('2024-09-20T10:10:00').getTime();
|
||
|
|
||
|
useEffect(() => {
|
||
|
const interval = setInterval(() => {
|
||
|
const now = new Date().getTime();
|
||
|
const distance = targetDate - now;
|
||
|
|
||
|
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||
|
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||
|
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||
|
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||
|
|
||
|
setCountdown({ days, hours, minutes, seconds });
|
||
|
|
||
|
if (distance < 0) {
|
||
|
clearInterval(interval);
|
||
|
setCountdown({ days: 0, hours: 0, minutes: 0, seconds: 0 });
|
||
|
}
|
||
|
}, 1000);
|
||
|
|
||
|
return () => clearInterval(interval);
|
||
|
}, [targetDate]);
|
||
|
|
||
|
return (
|
||
|
<ThemedView style={styles.container}>
|
||
|
<ThemedText style={styles.title}>Countdown to Next Visit</ThemedText>
|
||
|
<ThemedView style={styles.countdownContainer}>
|
||
|
<CountdownItem value={countdown.days} label="Days" />
|
||
|
<CountdownItem value={countdown.hours} label="Hours" />
|
||
|
<CountdownItem value={countdown.minutes} label="Minutes" />
|
||
|
<CountdownItem value={countdown.seconds} label="Seconds" />
|
||
|
</ThemedView>
|
||
|
</ThemedView>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
function CountdownItem({ value, label }) {
|
||
|
return (
|
||
|
<ThemedView style={styles.countdownItem}>
|
||
|
<ThemedText style={styles.countdownValue}>{value}</ThemedText>
|
||
|
<ThemedText style={styles.countdownLabel}>{label}</ThemedText>
|
||
|
</ThemedView>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
const styles = StyleSheet.create({
|
||
|
container: {
|
||
|
flex: 1,
|
||
|
alignItems: 'center',
|
||
|
justifyContent: 'center',
|
||
|
},
|
||
|
title: {
|
||
|
fontSize: 56,
|
||
|
lineHeight: 64,
|
||
|
fontWeight: 'bold',
|
||
|
marginBottom: 20,
|
||
|
textAlign: 'center',
|
||
|
paddingHorizontal: 20,
|
||
|
},
|
||
|
countdownContainer: {
|
||
|
flexDirection: 'row',
|
||
|
justifyContent: 'center',
|
||
|
alignItems: 'center',
|
||
|
},
|
||
|
countdownItem: {
|
||
|
margin: 10,
|
||
|
lineHeight: 32,
|
||
|
alignItems: 'center',
|
||
|
},
|
||
|
countdownValue: {
|
||
|
fontSize: 32,
|
||
|
lineHeight: 32,
|
||
|
fontWeight: 'bold',
|
||
|
},
|
||
|
countdownLabel: {
|
||
|
fontSize: 24,
|
||
|
},
|
||
|
});
|