AppCakes
98 lines
2.1 KiB
TypeScript
98 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { IonIcon } from '@ionic/react';
|
|
|
|
interface DashboardMetricCardProps {
|
|
label: string;
|
|
value: string;
|
|
hint: string;
|
|
icon: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
const DashboardMetricCard: React.FC<DashboardMetricCardProps> = ({
|
|
label,
|
|
value,
|
|
hint,
|
|
icon,
|
|
onClick,
|
|
}) => {
|
|
return (
|
|
<div
|
|
onClick={onClick}
|
|
style={{
|
|
background: 'var(--color-surface)',
|
|
borderRadius: '24px',
|
|
padding: '20px',
|
|
flex: '1',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '12px',
|
|
cursor: onClick ? 'pointer' : 'default',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
gap: '12px',
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
fontSize: '12px',
|
|
fontWeight: '700',
|
|
color: 'var(--color-text-tertiary)',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '0.05em',
|
|
}}
|
|
>
|
|
{label}
|
|
</span>
|
|
<div
|
|
style={{
|
|
width: '36px',
|
|
height: '36px',
|
|
borderRadius: '12px',
|
|
background: 'var(--color-brand-medium)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
<IonIcon
|
|
icon={icon}
|
|
style={{ color: 'var(--color-brand)', fontSize: '18px' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div
|
|
style={{
|
|
fontSize: '28px',
|
|
fontWeight: '400',
|
|
color: 'var(--color-text-primary)',
|
|
lineHeight: '1',
|
|
fontVariantNumeric: 'tabular-nums',
|
|
}}
|
|
>
|
|
{value}
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: '12px',
|
|
fontWeight: '400',
|
|
color: 'var(--color-text-secondary)',
|
|
marginTop: '8px',
|
|
}}
|
|
>
|
|
{hint}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DashboardMetricCard;
|