48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import React from "react";
|
|
|
|
interface SimpleCardProps {
|
|
header: string;
|
|
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>; // React component for SVG icon
|
|
value: string;
|
|
per: string; // Percentage change
|
|
}
|
|
|
|
const SimpleCard: React.FC<SimpleCardProps> = ({
|
|
header,
|
|
icon: Icon,
|
|
value,
|
|
per,
|
|
}) => {
|
|
|
|
const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
|
|
const cardData = JSON.stringify({
|
|
header,
|
|
value,
|
|
per,
|
|
className: event.currentTarget.className,
|
|
});
|
|
|
|
console.log("Dragging Data:", cardData); // ✅ Debugging log
|
|
|
|
event.dataTransfer.setData("text/plain", cardData);
|
|
};
|
|
|
|
return (
|
|
<div className="floating total-card" draggable onDragStart={handleDragStart}>
|
|
<div className="header-wrapper">
|
|
<div className="header">{header}</div>
|
|
<div className="data-values">
|
|
<div className="value">{value}</div>
|
|
<div className="per">{per}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="icon">
|
|
<Icon />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SimpleCard;
|