import { Pressable, View, Text, Animated } from 'react-native';
import { useEffect, useRef } from 'react';
interface VoiceButtonProps {
state: 'idle' | 'recording' | 'processing' | 'playing';
onPress: () => void;
disabled?: boolean;
}
export function VoiceButton({ state, onPress, disabled = false }: VoiceButtonProps) {
const pulseAnim = useRef(new Animated.Value(1)).current;
useEffect(() => {
if (state === 'recording') {
Animated.loop(
Animated.sequence([
Animated.timing(pulseAnim, {
toValue: 1.2,
duration: 800,
useNativeDriver: true,
}),
Animated.timing(pulseAnim, {
toValue: 1,
duration: 800,
useNativeDriver: true,
}),
])
).start();
} else {
pulseAnim.setValue(1);
}
}, [state, pulseAnim]);
const getButtonStyle = () => {
switch (state) {
case 'recording':
return 'bg-red-500';
case 'processing':
return 'bg-blue-500';
case 'playing':
return 'bg-green-500';
default:
return 'bg-zinc-700';
}
};
const getIcon = () => {
switch (state) {
case 'recording':
return (
);
case 'processing':
return (
);
case 'playing':
return (
);
default:
return (
);
}
};
const getLabel = () => {
switch (state) {
case 'recording':
return 'Recording...';
case 'processing':
return 'Processing...';
case 'playing':
return 'Playing...';
default:
return 'Tap to speak';
}
};
return (
{getIcon()}
{getLabel()}
);
}