57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import { ThemedText } from '@/components/themed-text';
|
|
import { useEffect } from 'react';
|
|
import { Animated, View } from 'react-native';
|
|
import { styles } from '../styles/welcomeStyle';
|
|
|
|
export default function FeatureCard({
|
|
icon,
|
|
title,
|
|
desc,
|
|
delay,
|
|
bgColor,
|
|
}: {
|
|
icon: any;
|
|
title: string;
|
|
bgColor: string;
|
|
desc: string;
|
|
delay: number;
|
|
}) {
|
|
const fadeAnim = new Animated.Value(0);
|
|
const slideAnim = new Animated.Value(30);
|
|
|
|
useEffect(() => {
|
|
Animated.parallel([
|
|
Animated.timing(fadeAnim, {
|
|
toValue: 1,
|
|
duration: 600,
|
|
delay: delay,
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.timing(slideAnim, {
|
|
toValue: 0,
|
|
duration: 600,
|
|
delay: delay,
|
|
useNativeDriver: true,
|
|
}),
|
|
]).start();
|
|
}, []);
|
|
|
|
return (
|
|
<Animated.View
|
|
style={[
|
|
styles.card,
|
|
{
|
|
opacity: fadeAnim,
|
|
transform: [{ translateY: slideAnim }],
|
|
},
|
|
]}
|
|
>
|
|
<View style={{ ...styles.cardIcon, backgroundColor: bgColor, borderRadius: 12 }}>
|
|
<ThemedText style={styles.cardIconText}>{icon}</ThemedText>
|
|
</View>
|
|
<ThemedText style={styles.cardTitle}>{title}</ThemedText>
|
|
<ThemedText style={styles.cardDesc}>{desc}</ThemedText>
|
|
</Animated.View>
|
|
);
|
|
}
|