dev setup

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

@@ -0,0 +1,99 @@
+'use client';
+
+import { Bell, BellRing, AlertCircle } from 'lucide-react';
+import type { DemoUrgency } from '../types';
+
+interface UrgencyOption {
+  urgency: DemoUrgency;
+  label: string;
+  description: string;
+  icon: any;
+}
+
+interface UrgencySectionProps {
+  selectedUrgency: DemoUrgency;
+  onSelectUrgency: (urgency: DemoUrgency) => void;
+}
+
+export const urgencyOptions: UrgencyOption[] = [
+  {
+    urgency: 'silent',
+    label: 'Silent',
+    description: 'Only shows in notification center',
+    icon: Bell,
+  },
+  {
+    urgency: 'toast',
+    label: 'Toast',
+    description: 'Shows a temporary popup',
+    icon: BellRing,
+  },
+  {
+    urgency: 'modal',
+    label: 'Modal',
+    description: 'Shows blocking modal (may require response)',
+    icon: AlertCircle,
+  },
+];
+
+export function UrgencySection({ selectedUrgency, onSelectUrgency }: UrgencySectionProps) {
+  return (
+    <div>
+      <div className="flex items-center gap-2 mb-2">
+        <BellRing className="w-4 h-4 text-gray-400" />
+        <span className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
+          Urgency Level
+        </span>
+      </div>
+
+      <div className="grid grid-cols-3 gap-1">
+        {urgencyOptions.map((option) => {
+          const Icon = option.icon;
+          const isSelected = selectedUrgency === option.urgency;
+
+          return (
+            <button
+              key={option.urgency}
+              onClick={() => onSelectUrgency(option.urgency)}
+              className={`
+                flex flex-col items-center gap-1 p-2 rounded-lg border transition-all text-center
+                ${isSelected
+                  ? option.urgency === 'modal'
+                    ? 'bg-red-500/20 border-red-500/50'
+                    : option.urgency === 'toast'
+                      ? 'bg-warning-amber/20 border-warning-amber/50'
+                      : 'bg-gray-500/20 border-gray-500/50'
+                  : 'bg-iron-gray/30 border-charcoal-outline hover:bg-iron-gray/50'
+                }
+              `}
+            >
+              <Icon className={`w-4 h-4 ${
+                isSelected
+                  ? option.urgency === 'modal'
+                    ? 'text-red-400'
+                    : option.urgency === 'toast'
+                      ? 'text-warning-amber'
+                      : 'text-gray-400'
+                  : 'text-gray-500'
+              }`} />
+              <span className={`text-[10px] font-medium ${
+                isSelected
+                  ? option.urgency === 'modal'
+                    ? 'text-red-400'
+                    : option.urgency === 'toast'
+                      ? 'text-warning-amber'
+                      : 'text-gray-400'
+                  : 'text-gray-500'
+              }`}>
+                {option.label}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+      <p className="text-[10px] text-gray-600 mt-1">
+        {urgencyOptions.find(o => o.urgency === selectedUrgency)?.description}
+      </p>
+    </div>
+  );
+}