52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/ui/Button';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Bell, Loader2 } from 'lucide-react';
|
|
import type { DemoNotificationType, DemoUrgency } from '../types';
|
|
|
|
interface NotificationSendSectionProps {
|
|
selectedType: DemoNotificationType;
|
|
selectedUrgency: DemoUrgency;
|
|
sending: boolean;
|
|
lastSent: string | null;
|
|
onSend: () => void;
|
|
}
|
|
|
|
export function NotificationSendSection({
|
|
sending,
|
|
lastSent,
|
|
onSend
|
|
}: NotificationSendSectionProps) {
|
|
return (
|
|
<Stack>
|
|
<Button
|
|
onClick={onSend}
|
|
disabled={sending}
|
|
variant={lastSent ? 'secondary' : 'primary'}
|
|
fullWidth
|
|
bg={lastSent ? 'bg-performance-green/20' : undefined}
|
|
borderColor={lastSent ? 'border-performance-green/30' : undefined}
|
|
color={lastSent ? 'text-performance-green' : undefined}
|
|
icon={sending ? <Icon icon={Loader2} size={4} animate="spin" /> : lastSent ? undefined : <Icon icon={Bell} size={4} />}
|
|
>
|
|
{sending ? 'Sending...' : lastSent ? '✓ Notification Sent!' : 'Send Demo Notification'}
|
|
</Button>
|
|
|
|
<Stack p={3} rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline" mt={2}>
|
|
<Text size="xs" color="text-gray-500" block>
|
|
<Text weight="bold" color="text-gray-400">Silent:</Text> Notification center only
|
|
</Text>
|
|
<Text size="xs" color="text-gray-500" block>
|
|
<Text weight="bold" color="text-gray-400">Toast:</Text> Temporary popup (auto-dismisses)
|
|
</Text>
|
|
<Text size="xs" color="text-gray-500" block>
|
|
<Text weight="bold" color="text-gray-400">Modal:</Text> Blocking popup (may require action)
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|