39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Mic, MicOff, MessageSquare } from 'lucide-react';
|
|
import { Button } from '../ui/button';
|
|
|
|
interface VoiceControlsProps {
|
|
isMuted: boolean;
|
|
onToggleMute: () => void;
|
|
showTranscript: boolean;
|
|
onToggleTranscript: () => void;
|
|
}
|
|
|
|
const VoiceControls: React.FC<VoiceControlsProps> = ({
|
|
isMuted,
|
|
onToggleMute,
|
|
showTranscript,
|
|
onToggleTranscript
|
|
}) => (
|
|
<div className="p-8 flex justify-center gap-6 relative z-10 bg-black/20 backdrop-blur-md">
|
|
<Button
|
|
variant={isMuted ? "destructive" : "secondary"}
|
|
size="icon"
|
|
className={`h-16 w-16 rounded-full ${!isMuted && 'bg-white/10 text-white hover:bg-white/20'}`}
|
|
onClick={onToggleMute}
|
|
>
|
|
{isMuted ? <MicOff className="!w-6 !h-6" /> : <Mic className="!w-6 !h-6" />}
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
size="icon"
|
|
className={`h-16 w-16 rounded-full ${showTranscript ? 'bg-teal-600 text-white hover:bg-teal-700' : 'bg-white/10 text-white hover:bg-white/20'}`}
|
|
onClick={onToggleTranscript}
|
|
>
|
|
<MessageSquare className="!w-6 !h-6" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
|
|
export default React.memo(VoiceControls);
|