35 lines
961 B
TypeScript
35 lines
961 B
TypeScript
import React from 'react';
|
|
|
|
import { STATUS_COLORS } from '../../helpers/constants';
|
|
|
|
import { formatNumber } from '../../helpers/helpers';
|
|
|
|
import Card from '../ui/Card';
|
|
|
|
import Line from '../ui/Line';
|
|
|
|
interface StatsCardProps {
|
|
total: number;
|
|
lineData: unknown[];
|
|
title: object;
|
|
color: string;
|
|
percent?: number;
|
|
}
|
|
|
|
const StatsCard = ({ total, lineData, percent, title, color }: StatsCardProps) => (
|
|
<Card type="card--full" bodyType="card-wrap">
|
|
<div className="card-body-stats">
|
|
<div className={`card-value card-value-stats text-${color}`}>{formatNumber(total)}</div>
|
|
|
|
<div className="card-title-stats">{title}</div>
|
|
</div>
|
|
{percent >= 0 && <div className={`card-value card-value-percent text-${color}`}>{percent}</div>}
|
|
|
|
<div className="card-chart-bg">
|
|
<Line data={lineData} color={STATUS_COLORS[color]} />
|
|
</div>
|
|
</Card>
|
|
);
|
|
|
|
export default StatsCard;
|