99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
'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>
|
|
);
|
|
} |