veza/apps/web/src/features/chat/components/ActiveCallBar.tsx
2026-02-22 03:46:10 +01:00

48 lines
1.2 KiB
TypeScript

import { Button } from '@/components/ui/button';
import { Mic, MicOff, PhoneOff } from 'lucide-react';
interface ActiveCallBarProps {
remoteUserName: string;
isMuted: boolean;
onToggleMute: () => void;
onHangup: () => void;
}
export function ActiveCallBar({
remoteUserName,
isMuted,
onToggleMute,
onHangup,
}: ActiveCallBarProps) {
return (
<div className="flex items-center justify-between px-4 py-2 bg-muted/50 border-t border-border">
<span className="text-sm text-muted-foreground">
En appel avec {remoteUserName}
</span>
<div className="flex gap-2">
<Button
variant="ghost"
size="sm"
onClick={onToggleMute}
className="h-8 w-8 p-0"
aria-label={isMuted ? 'Activer le micro' : 'Couper le micro'}
>
{isMuted ? (
<MicOff className="h-4 w-4 text-destructive" />
) : (
<Mic className="h-4 w-4" />
)}
</Button>
<Button
variant="destructive"
size="sm"
onClick={onHangup}
className="h-8 w-8 p-0"
aria-label="Raccrocher"
>
<PhoneOff className="h-4 w-4" />
</Button>
</div>
</div>
);
}