dev setup

apps/website/components/dev/sections/NotificationSendSection.tsx

@@ -0,0 +1,64 @@
+'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>
+  );
+}