109 lines
3.7 KiB
TypeScript
109 lines
3.7 KiB
TypeScript
"use client"
|
|
|
|
import { useState } 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';
|
|
|
|
interface PanicButtonDemoProps {
|
|
onTriggerAlert: (priority: 'high' | 'medium' | 'low') => void;
|
|
onResolveAllAlerts: () => void;
|
|
activeIncidents: IIncidentLog[];
|
|
className?: string;
|
|
}
|
|
|
|
export default function PanicButtonDemo({
|
|
onTriggerAlert,
|
|
onResolveAllAlerts,
|
|
activeIncidents,
|
|
className
|
|
}: PanicButtonDemoProps) {
|
|
const [isTriggering, setIsTriggering] = useState(false);
|
|
|
|
const handleTriggerPanic = (priority: 'high' | 'medium' | 'low') => {
|
|
setIsTriggering(true);
|
|
onTriggerAlert(priority);
|
|
|
|
// Reset animation
|
|
setTimeout(() => {
|
|
setIsTriggering(false);
|
|
}, 1000);
|
|
};
|
|
|
|
return (
|
|
<div className={cn("border border-muted bg-background p-3 rounded-lg shadow-xl", className)}>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="font-bold flex items-center gap-2">
|
|
<Shield className="h-5 w-5 text-red-500" />
|
|
<span>EWS Panic Button Demo</span>
|
|
</h3>
|
|
|
|
{activeIncidents.length > 0 && (
|
|
<Badge variant="destructive" className="ml-2 animate-pulse">
|
|
{activeIncidents.length} Active
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<Button
|
|
variant="destructive"
|
|
size="lg"
|
|
className={cn(
|
|
"bg-red-600 hover:bg-red-700 flex items-center gap-2 transition-all",
|
|
isTriggering && "animate-ping"
|
|
)}
|
|
onClick={() => handleTriggerPanic('high')}
|
|
>
|
|
<AlertTriangle className="h-5 w-5" />
|
|
<span>SEND HIGH PRIORITY ALERT</span>
|
|
</Button>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<Button
|
|
variant="default"
|
|
className="bg-amber-600 hover:bg-amber-700 flex items-center gap-2"
|
|
onClick={() => handleTriggerPanic('medium')}
|
|
>
|
|
<Bell className="h-4 w-4" />
|
|
<span>Medium Priority</span>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="border-blue-600 text-blue-600 hover:bg-blue-100 flex items-center gap-2"
|
|
onClick={() => handleTriggerPanic('low')}
|
|
>
|
|
<RadioTower className="h-4 w-4" />
|
|
<span>Low Priority</span>
|
|
</Button>
|
|
</div>
|
|
|
|
{activeIncidents.length > 0 && (
|
|
<Button
|
|
variant="outline"
|
|
className="mt-3 border-green-600 text-green-600 hover:bg-green-100"
|
|
onClick={onResolveAllAlerts}
|
|
>
|
|
<Shield className="h-4 w-4 mr-2" />
|
|
<span>Resolve All Alerts</span>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<p className="text-xs text-muted-foreground mt-2">
|
|
Simulates a mobile app panic button activation in the Jember area.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|