32 lines
908 B
React
32 lines
908 B
React
|
export function MetricGrid({ metrics }) {
|
||
|
|
return (
|
||
|
|
<section
|
||
|
|
style={{
|
||
|
|
display: 'grid',
|
||
|
|
gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
|
||
|
|
gap: '1rem',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{metrics.map((item) => (
|
||
|
|
<article
|
||
|
|
key={item.label}
|
||
|
|
style={{
|
||
|
|
padding: '1.15rem',
|
||
|
|
borderRadius: '22px',
|
||
|
|
border: '1px solid var(--color-border)',
|
||
|
|
background: '#fff',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<span style={{ color: 'var(--color-text-soft)', display: 'block' }}>{item.label}</span>
|
||
|
|
<strong style={{ display: 'block', fontSize: '1.4rem', marginTop: '0.45rem' }}>
|
||
|
|
{item.value}
|
||
|
|
</strong>
|
||
|
|
<span style={{ color: 'var(--color-text-soft)', display: 'block', marginTop: '0.45rem' }}>
|
||
|
|
{item.detail}
|
||
|
|
</span>
|
||
|
|
</article>
|
||
|
|
))}
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|