38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { useLanguage } from '@/i18n';
|
||
import { fCurrency } from '@/utils/FormatNumber';
|
||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||
|
||
interface CardDataProduct {
|
||
title: string;
|
||
total: number;
|
||
growth: number;
|
||
surplus: boolean;
|
||
icon: string;
|
||
}
|
||
|
||
const Card = ({ title, total, growth, surplus, icon }: CardDataProduct) => {
|
||
const { isRTL } = useLanguage();
|
||
|
||
return (
|
||
<div className="card h-full w-full bg-[length:85%] [background-position:9rem_-4rem] rtl:[background-position:-4rem_-4rem] bg-no-repeat channel-stats-bg">
|
||
<div className="card-body flex flex-col gap-4 p-5 lg:p-b-7.5 lg:pt-4">
|
||
<div className="flex justify-between">
|
||
<div className="flex flex-col w-full">
|
||
<span className="text-sm font-normal text-gray-600 mb-5">{title}</span>
|
||
<span className="text-3xl font-semibold text-gray-900 mb-0">{total}</span>
|
||
<span
|
||
className={`text-sm font-semibold mt-2 flex items-center gap-1 ${growth === 0 ? 'text-primary' : surplus ? 'text-green-500' : 'text-red-500'
|
||
}`}
|
||
>
|
||
{growth === 0 ? '−' : surplus ? '▲' : '▼'} {growth} % From Last Week
|
||
</span>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export { Card };
|