46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import clsx from "clsx";
|
|
import { IconType } from "react-icons";
|
|
|
|
interface Props {
|
|
Icon: IconType;
|
|
label: string;
|
|
value?: string | number;
|
|
color: "purple" | "rose" | "red" | "green";
|
|
tooltip?: string;
|
|
onClick?: () => void;
|
|
isSelected?: boolean;
|
|
isLoading?: boolean;
|
|
disabled?: boolean
|
|
className?: string;
|
|
}
|
|
|
|
export default function IconCard({ Icon, label, value, color, tooltip, onClick, className, isLoading, disabled, isSelected }: Props) {
|
|
const colorClasses: { [key in typeof color]: string } = {
|
|
purple: "mti-purple-light",
|
|
red: "mti-red-light",
|
|
rose: "mti-rose-light",
|
|
green: "mti-green-light",
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
className={clsx(
|
|
"bg-white border rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-full h-52 justify-center cursor-pointer hover:shadow-lg hover:border-mti-purple-dark transition ease-in-out duration-300 disabled:grayscale-0",
|
|
tooltip && "tooltip tooltip-bottom",
|
|
isSelected && `border border-solid border-${colorClasses[color]}`,
|
|
className,
|
|
)}
|
|
data-tip={tooltip}>
|
|
<Icon className={clsx("text-6xl", `text-${colorClasses[color]}`)} />
|
|
<span className="flex flex-col gap-1 items-center text-xl">
|
|
<span className="text-lg">{label}</span>
|
|
<span className={clsx("font-semibold", `text-${colorClasses[color]}`, isLoading && "animate-pulse")}>
|
|
{isLoading ? "..." : value}
|
|
</span>
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|