KPI Card Logic

kpi-card.js

import React from "react";
import MediaQuery from "react-responsive";
import Icon from "./icon.js";

function KPICard({ title, value, icon, iconColor }) {
	return (
		<div className="kpi-card">
			{/* Mobile view */}
			<MediaQuery maxWidth={576}>
				<div className="kpi-card__mobile__align kpi-card__style">
					<p className="kpi-card__mobile__title">
						{title}
					</p>
					<p className="kpi-card__mobile__value">
						{value}
					</p>
				</div>
			</MediaQuery>
			{/* Web view */}
			<MediaQuery minWidth={576}>
				<div className="kpi-card__web__align kpi-card__style">
					<div className="kpi-card__web__icon-text-container">
						<Icon icon={icon} color={iconColor} iconSize={24} />
						<p className="kpi-card__web__title">
							{title}
						</p>
					</div>
					<p className="kpi-card__web__value">
						{value}
					</p>
				</div>
			</MediaQuery>
		</div>
	);
}


export default KPICard;