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>
45 lines
847 B
TypeScript
45 lines
847 B
TypeScript
import React from 'react';
|
|
import { Column, Row, Text } from '@react-email/components';
|
|
import { theme } from '../theme';
|
|
import { Card } from './Card';
|
|
|
|
export interface Metric {
|
|
label: string;
|
|
value: string;
|
|
}
|
|
|
|
interface MetricGridProps {
|
|
metrics: Metric[];
|
|
}
|
|
|
|
export const MetricGrid = ({ metrics }: MetricGridProps) => (
|
|
<Card>
|
|
<Row>
|
|
{metrics.map((metric) => (
|
|
<Column key={metric.label} style={col}>
|
|
<Text style={value}>{metric.value}</Text>
|
|
<Text style={label}>{metric.label}</Text>
|
|
</Column>
|
|
))}
|
|
</Row>
|
|
</Card>
|
|
);
|
|
|
|
const col = {
|
|
padding: '8px',
|
|
textAlign: 'center' as const,
|
|
};
|
|
|
|
const value = {
|
|
color: theme.colors.forest,
|
|
fontSize: '20px',
|
|
fontWeight: 700,
|
|
margin: '0 0 4px',
|
|
};
|
|
|
|
const label = {
|
|
color: theme.colors.muted,
|
|
fontSize: '12px',
|
|
margin: 0,
|
|
};
|