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

feature/keyword-actions-ui

تصفح المصدر
هذا الالتزام موجود في:
mohammedsaid18
2025-10-19 13:53:47 +03:00
الأصل 81a4683c50
التزام a1ce182317
41 ملفات معدلة مع 1486 إضافات و162 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

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

@@ -5,7 +5,7 @@ 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"
@@ -15,15 +15,11 @@ const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChan
<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>
)}
{isHovered && (
<div className="absolute bottom-[150%] left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-fit whitespace-nowrap 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-[40%] left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-t-gray-800"></div>
{tooltipText}
</div>
)}
</div>
@@ -64,9 +60,9 @@ const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChan
<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">
<div className="absolute bottom-[150%] left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-fit whitespace-nowrap 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>
<div className="absolute -bottom-[40%] left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-t-gray-800"></div>
{tooltipText}
</div>
)}