29 lines
1.2 KiB
JavaScript
29 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
|
|
const StatCard = ({ icon = null, label, value, tooltipText, width = 200.4 }) => {
|
|
return (
|
|
<div
|
|
className={`relative group flex flex-col items-center justify-center rounded-lg border border-gray-200 bg-white px-5 py-5 shadow-sm ${typeof width === 'number' ? `w-[${width}px]` : `w-${width}`} min-h-[120px]`}
|
|
>
|
|
<div className="flex items-center justify-center gap-2 whitespace-nowrap">
|
|
{icon && <div className="flex items-center justify-center w-5 h-5">{icon}</div>}
|
|
<span className="text-sm font-medium text-gray-600 leading-5 text-center truncate">
|
|
{label}
|
|
</span>
|
|
</div>
|
|
|
|
<span className="mt-2 text-[24px] font-semibold text-[#232528] leading-[30px] text-center">
|
|
{value}
|
|
</span>
|
|
|
|
{tooltipText && (
|
|
<div className="absolute bottom-[-58px] left-1/2 -translate-x-1/2 z-20 hidden w-[220px] text-center rounded-md bg-black text-white text-xs px-3 py-2 group-hover:block">
|
|
{tooltipText}
|
|
<div className="absolute -top-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-black rotate-45"></div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StatCard; |