Updated the design step 1 is finsih now I'll check it with mohammed
هذا الالتزام موجود في:
@@ -1,78 +1,82 @@
|
||||
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 }: { icon: any, img: any, value: any, label: any, tooltipText: any, valueChange: any, size: any }) => {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
if (Img) {
|
||||
return (
|
||||
<div className="relative cursor-pointer"
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}>
|
||||
<img src={Img} alt="Img" className="w-12 h-12" />
|
||||
<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 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>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="flex-1 min-w-[50px] bg-white rounded-xl shadow-sm 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`}>
|
||||
<span>{value}</span>
|
||||
{valueChange && (
|
||||
<div className="flex items-center text-sm font-semibold text-green-500">
|
||||
{Icon && (
|
||||
<ArrowUp size={14} className="inline-block mr-1" />
|
||||
)}
|
||||
<span>{valueChange}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center space-x-1 mt-1 text-gray-500">
|
||||
<span className="text-sm">{label}</span>
|
||||
{tooltipText && (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
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 }: { icon?: any, img?: any, value?: any, label?: any, tooltipText?: any, valueChange?: any, size?: any, extraStyle?: any }) => {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
if (Img) {
|
||||
return (
|
||||
<div className="relative cursor-pointer"
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}>
|
||||
<div className={`${extraStyle}`}>
|
||||
<img src={Img} alt="Img" className="w-10 h-10" />
|
||||
</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 shadow-sm 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`}>
|
||||
<span className="text-sm text-gray-400">{!tooltipText && label}</span>
|
||||
|
||||
<span className="text-gray-600 bg-gray-200 px-1 py-1 rounded-md">{value}</span>
|
||||
{valueChange && (
|
||||
<div className="flex items-center text-sm font-semibold text-green-500">
|
||||
{Icon && (
|
||||
<ArrowUp size={14} className="inline-block mr-1" />
|
||||
)}
|
||||
<span>{valueChange}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center space-x-1 mt-1 text-gray-500">
|
||||
<span className="text-sm">{tooltipText && label}</span>
|
||||
{tooltipText && (
|
||||
<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
|
||||
المرجع في مشكلة جديدة
حظر مستخدم