49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
|
import { Link } from 'react-router-dom';
|
||
|
|
import { LucideIcon } from 'lucide-react';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
type ButtonVariant = 'critical' | 'high' | 'medium';
|
||
|
|
|
||
|
|
interface EmergencyButtonProps {
|
||
|
|
to: string;
|
||
|
|
icon: LucideIcon;
|
||
|
|
title: string;
|
||
|
|
subtitle?: string;
|
||
|
|
variant?: ButtonVariant;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const variantClasses: Record<ButtonVariant, string> = {
|
||
|
|
critical: 'btn-emergency-critical',
|
||
|
|
high: 'btn-emergency-high',
|
||
|
|
medium: 'btn-emergency-medium',
|
||
|
|
};
|
||
|
|
|
||
|
|
const EmergencyButton = ({
|
||
|
|
to,
|
||
|
|
icon: Icon,
|
||
|
|
title,
|
||
|
|
subtitle,
|
||
|
|
variant = 'critical',
|
||
|
|
className,
|
||
|
|
}: EmergencyButtonProps) => {
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
to={to}
|
||
|
|
className={cn(
|
||
|
|
'btn-emergency flex flex-col items-center justify-center gap-1 p-4',
|
||
|
|
variantClasses[variant],
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Icon className="w-8 h-8" />
|
||
|
|
<span className="text-sm font-semibold text-center leading-tight">{title}</span>
|
||
|
|
{subtitle && (
|
||
|
|
<span className="text-2xs opacity-80 text-center">{subtitle}</span>
|
||
|
|
)}
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default EmergencyButton;
|