ENCOA-272

src/components/IconCard.tsx

@@ -0,0 +1,45 @@
+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>
+	);
+}