64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { Bell } from 'lucide-react';
|
|
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
|
|
import { useNotifications } from '@/components/notifications/NotificationProvider';
|
|
import type { NotificationVariant } from '@/components/notifications/notificationTypes';
|
|
import type { DemoNotificationType, DemoUrgency } from '../types';
|
|
|
|
interface NotificationSendSectionProps {
|
|
selectedType: DemoNotificationType;
|
|
selectedUrgency: DemoUrgency;
|
|
sending: boolean;
|
|
lastSent: string | null;
|
|
onSend: () => void;
|
|
}
|
|
|
|
export function NotificationSendSection({
|
|
selectedType,
|
|
selectedUrgency,
|
|
sending,
|
|
lastSent,
|
|
onSend
|
|
}: NotificationSendSectionProps) {
|
|
return (
|
|
<div>
|
|
<button
|
|
onClick={onSend}
|
|
disabled={sending}
|
|
className={`
|
|
w-full flex items-center justify-center gap-2 py-2.5 rounded-lg font-medium text-sm transition-all
|
|
${lastSent
|
|
? 'bg-performance-green/20 border border-performance-green/30 text-performance-green'
|
|
: 'bg-primary-blue hover:bg-primary-blue/80 text-white'
|
|
}
|
|
disabled:opacity-50 disabled:cursor-not-allowed
|
|
`}
|
|
>
|
|
{sending ? (
|
|
<>
|
|
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
|
Sending...
|
|
</>
|
|
) : lastSent ? (
|
|
<>
|
|
✓ Notification Sent!
|
|
</>
|
|
) : (
|
|
<>
|
|
<Bell className="w-4 h-4" />
|
|
Send Demo Notification
|
|
</>
|
|
)}
|
|
</button>
|
|
|
|
<div className="p-3 rounded-lg bg-iron-gray/50 border border-charcoal-outline mt-2">
|
|
<p className="text-[10px] text-gray-500">
|
|
<strong className="text-gray-400">Silent:</strong> Notification center only<br/>
|
|
<strong className="text-gray-400">Toast:</strong> Temporary popup (auto-dismisses)<br/>
|
|
<strong className="text-gray-400">Modal:</strong> Blocking popup (may require action)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |