82 أسطر
4.2 KiB
TypeScript
82 أسطر
4.2 KiB
TypeScript
import { ArrowUp, Info } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
|
|
// Reusable Metric Card Component
|
|
const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChange, size, extraStyle, disabled }: { icon?: any, img?: any, value?: any, label?: any, tooltipText?: any, valueChange?: any, size?: any, extraStyle?: any, disabled?: any }) => {
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
console.log(Img);
|
|
if (Img) {
|
|
return (
|
|
<div className="relative cursor-pointer"
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}>
|
|
<div className={`${extraStyle} ${disabled ? "opacity-30" : ""}`}>
|
|
<img src={Img} alt="Img" className={` ${disabled ? "w-6 2xl:w-6 h-6 2xl:h-6" : "w-6 2xl:w-8 h-6 2xl:h-8"}${value === 'Map' ? ' scale-125' : ""} `} />
|
|
</div>
|
|
<div className="">
|
|
{tooltipText && (
|
|
<div className="relative">
|
|
{isHovered && (
|
|
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-4 py-2 min-w-28 text-center bg-gray-800 text-white text-lg rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100 ">
|
|
{/* Tooltip triangle */}
|
|
<div className="absolute bottom-full left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-b-gray-800 "></div>
|
|
{tooltipText}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="flex-1 min-w-[50px] bg-white rounded-xl p-2 flex items-center space-x-2 relative"
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
>
|
|
{Icon && (
|
|
<div className="p-3 bg-gray-100 rounded-lg">
|
|
<Icon size={24} className="text-gray-500" />
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex-1">
|
|
<div className={`${size === 'sm' ? 'text-sm border-2 border-gray-200 px-1 rounded-lg' : 'text-xl'} font-bold text-gray-800 flex items-center space-x-2 p-[3px] justify-between `}>
|
|
<span className="text-sm font-semibold text-[#787B91]">{!tooltipText && label}</span>
|
|
|
|
<span className="text-[#787B91] font-semibold bg-gray-200 px-1 py-0 rounded-md">{value}</span>
|
|
{valueChange && (
|
|
<div className="flex items-center text-md font-medium text-[#029056]">
|
|
{Icon && (
|
|
<ArrowUp size={14} className="inline-block mr-1" />
|
|
)}
|
|
<span>{valueChange}</span>
|
|
</div>
|
|
)}
|
|
|
|
{tooltipText && (
|
|
<div className="flex items-center space-x-1 mt-1 text-gray-500">
|
|
<span className="text-sm">{label}</span>
|
|
<div className="relative">
|
|
<Info size={16} className="text-gray-400 cursor-pointer" />
|
|
{isHovered && (
|
|
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-72 bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
|
|
{/* Tooltip triangle */}
|
|
<div className="absolute bottom-full left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-b-gray-800"></div>
|
|
{tooltipText}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MetricCard |