Kirubel-Kibru-Yaltopia
f9fa3bc83b
Ship 23 transactional templates, shared brand tokens/logo, preview UI, render API, CHANGELOG, and docs for Ecom/Admin/B2B consumers. Co-authored-by: Cursor <cursoragent@cursor.com>
66 lines
1.3 KiB
TypeScript
66 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { Section, Text } from '@react-email/components';
|
|
import { theme } from '../theme';
|
|
|
|
type Tone = 'success' | 'warning' | 'danger' | 'info' | 'brand';
|
|
|
|
interface StatusBannerProps {
|
|
tone?: Tone;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const tones: Record<Tone, { bg: string; fg: string; border: string }> = {
|
|
success: {
|
|
bg: '#EEF6E8',
|
|
fg: theme.colors.success,
|
|
border: theme.colors.brand,
|
|
},
|
|
warning: {
|
|
bg: '#FFF4E8',
|
|
fg: theme.colors.accent,
|
|
border: theme.colors.accent,
|
|
},
|
|
danger: {
|
|
bg: '#FDECEA',
|
|
fg: theme.colors.danger,
|
|
border: theme.colors.danger,
|
|
},
|
|
info: {
|
|
bg: '#EAF1F8',
|
|
fg: theme.colors.info,
|
|
border: theme.colors.info,
|
|
},
|
|
brand: {
|
|
bg: '#F4F8E4',
|
|
fg: theme.colors.forest,
|
|
border: theme.colors.brand,
|
|
},
|
|
};
|
|
|
|
export const StatusBanner = ({ tone = 'brand', children }: StatusBannerProps) => {
|
|
const t = tones[tone];
|
|
return (
|
|
<Section
|
|
style={{
|
|
backgroundColor: t.bg,
|
|
borderLeft: `4px solid ${t.border}`,
|
|
borderRadius: '8px',
|
|
padding: '12px 16px',
|
|
margin: '0 0 20px',
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
color: t.fg,
|
|
fontSize: '14px',
|
|
fontWeight: 600,
|
|
margin: 0,
|
|
lineHeight: '20px',
|
|
}}
|
|
>
|
|
{children}
|
|
</Text>
|
|
</Section>
|
|
);
|
|
};
|