mohammedsaid18/dashboard
1
0
نسخ 2
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

update cards and padding app

تصفح المصدر
هذا الالتزام موجود في:
mohammedsaid18
2025-10-13 10:04:36 +03:00
الأصل f779ac3417
التزام 69c1d73e3b
8 ملفات معدلة مع 90 إضافات و82 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

20
src/components/shared/MetricCard.tsx
عرض الملف

@@ -5,14 +5,14 @@ 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);
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' : ""} ` } />
<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 && (
@@ -45,12 +45,12 @@ console.log(Img);
)}
<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`}>
<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 text-gray-400">{!tooltipText && label}</span>
<span className="text-[#787B91] bg-gray-200 px-1 py-1 rounded-md">{value}</span>
<span className="text-[#787B91] bg-gray-200 px-1 py-0 rounded-md">{value}</span>
{valueChange && (
<div className="flex items-center text-sm font-semibold text-green-500">
<div className="flex items-center text-md font-semibold text-green-500">
{Icon && (
<ArrowUp size={14} className="inline-block mr-1" />
)}
@@ -58,9 +58,9 @@ console.log(Img);
</div>
)}
<div className="flex items-center space-x-1 mt-1 text-gray-500">
<span className="text-sm">{tooltipText && label}</span>
{tooltipText && (
{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 && (
@@ -71,8 +71,8 @@ console.log(Img);
</div>
)}
</div>
)}
</div>
</div>
)}
</div>
</div>
</div>