157 lines
6.8 KiB
TypeScript
157 lines
6.8 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { Button } from '@/app/_components/ui/button';
|
|
import {
|
|
AlertTriangle,
|
|
Bell,
|
|
ShieldAlert,
|
|
Radio,
|
|
RadioTower,
|
|
Shield
|
|
} from 'lucide-react';
|
|
import { cn } from '@/app/_lib/utils';
|
|
import { Badge } from '@/app/_components/ui/badge';
|
|
import { IIncidentLog } from '@/app/_utils/types/ews';
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/app/_components/ui/tooltip";
|
|
|
|
interface PanicButtonDemoProps {
|
|
onTriggerAlert: (priority: 'high' | 'medium' | 'low') => void;
|
|
onResolveAllAlerts: () => void;
|
|
activeIncidents: IIncidentLog[];
|
|
className?: string;
|
|
onPanicTriggered?: () => void; // New callback for notifying parent about panic trigger
|
|
}
|
|
|
|
export default function PanicButtonDemo({
|
|
onTriggerAlert,
|
|
onResolveAllAlerts,
|
|
activeIncidents,
|
|
className,
|
|
onPanicTriggered
|
|
}: PanicButtonDemoProps) {
|
|
const [isTriggering, setIsTriggering] = useState(false);
|
|
const [activeButton, setActiveButton] = useState<string | null>(null);
|
|
|
|
const handleTriggerPanic = (priority: 'high' | 'medium' | 'low') => {
|
|
setIsTriggering(true);
|
|
setActiveButton(priority);
|
|
onTriggerAlert(priority);
|
|
|
|
// Notify parent component that panic was triggered
|
|
if (onPanicTriggered) {
|
|
onPanicTriggered();
|
|
}
|
|
|
|
// Reset animation
|
|
setTimeout(() => {
|
|
setIsTriggering(false);
|
|
setActiveButton(null);
|
|
}, 1000);
|
|
};
|
|
|
|
return (
|
|
<div className={cn("border border-muted bg-background p-1 rounded-lg shadow-xl", className)}>
|
|
<TooltipProvider>
|
|
<div className="flex items-center space-x-1">
|
|
{/* High Priority Alert Button */}
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
size="medium"
|
|
className={cn(
|
|
"h-8 w-8 rounded-md",
|
|
activeButton === 'high'
|
|
? "bg-red-600 text-white"
|
|
: "bg-background text-red-600 hover:bg-red-600 hover:text-white",
|
|
isTriggering && activeButton === 'high' && "animate-pulse"
|
|
)}
|
|
onClick={() => handleTriggerPanic('high')}
|
|
>
|
|
<AlertTriangle className="h-5 w-5" />
|
|
<span className="sr-only">High Priority Alert</span>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
<p>Send High Priority Alert</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
|
|
{/* Medium Priority Alert Button */}
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
size="medium"
|
|
className={cn(
|
|
"h-8 w-8 rounded-md",
|
|
activeButton === 'medium'
|
|
? "bg-amber-600 text-white"
|
|
: "bg-background text-amber-600 hover:bg-amber-600 hover:text-white",
|
|
isTriggering && activeButton === 'medium' && "animate-pulse"
|
|
)}
|
|
onClick={() => handleTriggerPanic('medium')}
|
|
>
|
|
<Bell className="h-5 w-5" />
|
|
<span className="sr-only">Medium Priority Alert</span>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
<p>Send Medium Priority Alert</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
|
|
{/* Low Priority Alert Button */}
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
size="medium"
|
|
className={cn(
|
|
"h-8 w-8 rounded-md",
|
|
activeButton === 'low'
|
|
? "bg-blue-600 text-white"
|
|
: "bg-background text-blue-600 hover:bg-blue-600 hover:text-white",
|
|
isTriggering && activeButton === 'low' && "animate-pulse"
|
|
)}
|
|
onClick={() => handleTriggerPanic('low')}
|
|
>
|
|
<RadioTower className="h-5 w-5" />
|
|
<span className="sr-only">Low Priority Alert</span>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
<p>Send Low Priority Alert</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
|
|
{/* Resolve All Alerts Button (only shown when there are active incidents) */}
|
|
{activeIncidents.length > 0 && (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
size="medium"
|
|
className="h-8 w-8 rounded-md bg-background text-green-600 hover:bg-green-600 hover:text-white relative"
|
|
onClick={onResolveAllAlerts}
|
|
>
|
|
<Shield className="h-5 w-5" />
|
|
<span className="sr-only">Resolve All Alerts</span>
|
|
|
|
{/* Badge showing active incident count */}
|
|
<Badge
|
|
variant="destructive"
|
|
className="absolute -top-2 -right-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
|
|
>
|
|
{activeIncidents.length}
|
|
</Badge>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
<p>Resolve All Active Alerts ({activeIncidents.length})</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
</div>
|
|
</TooltipProvider>
|
|
</div>
|
|
);
|
|
}
|