114 lines
3.4 KiB
TypeScript
114 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Bell, BellRing, AlertCircle, LucideIcon } from 'lucide-react';
|
|
import type { DemoUrgency } from '../types';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Icon } from '@/ui/Icon';
|
|
|
|
interface UrgencyOption {
|
|
urgency: DemoUrgency;
|
|
label: string;
|
|
description: string;
|
|
icon: LucideIcon;
|
|
}
|
|
|
|
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 (
|
|
<Box>
|
|
<Box display="flex" alignItems="center" gap={2} mb={2}>
|
|
<Icon icon={BellRing} size={4} color="rgb(156, 163, 175)" />
|
|
<Text size="xs" weight="semibold" color="text-gray-400" uppercase letterSpacing="wide">
|
|
Urgency Level
|
|
</Text>
|
|
</Box>
|
|
|
|
<Box display="grid" gridCols={3} gap={1}>
|
|
{urgencyOptions.map((option) => {
|
|
const isSelected = selectedUrgency === option.urgency;
|
|
|
|
const getSelectedBg = () => {
|
|
if (option.urgency === 'modal') return 'bg-red-500/20';
|
|
if (option.urgency === 'toast') return 'bg-warning-amber/20';
|
|
return 'bg-gray-500/20';
|
|
};
|
|
|
|
const getSelectedBorder = () => {
|
|
if (option.urgency === 'modal') return 'border-red-500/50';
|
|
if (option.urgency === 'toast') return 'border-warning-amber/50';
|
|
return 'border-gray-500/50';
|
|
};
|
|
|
|
const getSelectedColor = () => {
|
|
if (option.urgency === 'modal') return 'rgb(239, 68, 68)';
|
|
if (option.urgency === 'toast') return 'rgb(245, 158, 11)';
|
|
return 'rgb(156, 163, 175)';
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
key={option.urgency}
|
|
as="button"
|
|
type="button"
|
|
onClick={() => onSelectUrgency(option.urgency)}
|
|
display="flex"
|
|
flexDirection="col"
|
|
alignItems="center"
|
|
gap={1}
|
|
p={2}
|
|
rounded="lg"
|
|
border
|
|
transition
|
|
bg={isSelected ? getSelectedBg() : 'bg-iron-gray/30'}
|
|
borderColor={isSelected ? getSelectedBorder() : 'border-charcoal-outline'}
|
|
>
|
|
<Icon
|
|
icon={option.icon}
|
|
size={4}
|
|
color={isSelected ? getSelectedColor() : 'rgb(107, 114, 128)'}
|
|
/>
|
|
<Text
|
|
size="xs"
|
|
weight="medium"
|
|
color={isSelected ? (option.urgency === 'modal' ? 'text-red-400' : option.urgency === 'toast' ? 'text-warning-amber' : 'text-gray-400') : 'text-gray-500'}
|
|
>
|
|
{option.label}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
<Text size="xs" color="text-gray-600" mt={1} block>
|
|
{urgencyOptions.find(o => o.urgency === selectedUrgency)?.description}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
}
|