hamedandClaude Opus 4.8
0bd18d74b7
Add accent (orange) + pastel stat-card tokens (light/dark), button accent/outline/lg/block variants, and a pastel StatCard primitive, aligning the admin design system with the clinic-pro-tauri reference. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
|
|
type StatTone = 'amber' | 'violet' | 'green' | 'pink';
|
|
|
|
const TONE: Record<StatTone, { bg: string; fg: string }> = {
|
|
amber: { bg: 'var(--stat-amber-bg)', fg: 'var(--stat-amber-fg)' },
|
|
violet: { bg: 'var(--stat-violet-bg)', fg: 'var(--stat-violet-fg)' },
|
|
green: { bg: 'var(--stat-green-bg)', fg: 'var(--stat-green-fg)' },
|
|
pink: { bg: 'var(--stat-pink-bg)', fg: 'var(--stat-pink-fg)' },
|
|
};
|
|
|
|
interface Props {
|
|
tone: StatTone;
|
|
label: string;
|
|
value: React.ReactNode;
|
|
icon?: React.ReactNode;
|
|
}
|
|
|
|
export default function StatCard({ tone, label, value, icon }: Props) {
|
|
const c = TONE[tone];
|
|
return (
|
|
<div
|
|
style={{
|
|
background: c.bg,
|
|
borderRadius: 'var(--r-lg)',
|
|
padding: '18px 20px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 14,
|
|
}}
|
|
>
|
|
{icon && (
|
|
<div
|
|
style={{
|
|
width: 44, height: 44, borderRadius: 12, flexShrink: 0,
|
|
background: c.fg, color: '#fff',
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
}}
|
|
>
|
|
{icon}
|
|
</div>
|
|
)}
|
|
<div style={{ flex: 1, minWidth: 0, textAlign: 'right' }}>
|
|
<div style={{ fontSize: 18, fontWeight: 800, color: 'var(--text)' }}>{value}</div>
|
|
<div style={{ fontSize: 12.5, color: 'var(--text-2)', marginTop: 3 }}>{label}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|