devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added a new card for the Corporate to show their user balance

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-01-20 15:09:42 +00:00
parent 9773f1da72
commit 8eb8a7af46
6 changed files with 75 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/dashboards/IconCard.tsx
View File

@@ -6,10 +6,11 @@ interface Props {
label: string;
value: string | number;
color: "purple" | "rose" | "red";
tooltip?: string;
onClick?: () => void;
}
export default function IconCard({Icon, label, value, color, onClick}: Props) {
export default function IconCard({Icon, label, value, color, tooltip, onClick}: Props) {
const colorClasses: {[key in typeof color]: string} = {
purple: "text-mti-purple-light",
red: "text-mti-red-light",
@@ -19,7 +20,11 @@ export default function IconCard({Icon, label, value, color, onClick}: Props) {
return (
<div
onClick={onClick}
className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
className={clsx(
"bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300",
tooltip && "tooltip tooltip-bottom",
)}
data-tip={tooltip}>
<Icon className={clsx("text-6xl", colorClasses[color])} />
<span className="flex flex-col gap-1 items-center text-xl">
<span className="text-lg">{label}</span>