// types import { IUserStateDistribution } from "types"; // constants import { STATE_GROUP_COLORS } from "constants/state"; type Props = { stateDistribution: IUserStateDistribution[]; }; export const ProfileWorkload: React.FC<Props> = ({ stateDistribution }) => ( <div className="space-y-2"> <h3 className="text-lg font-medium">Workload</h3> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4 justify-stretch"> {stateDistribution.map((group) => ( <div key={group.state_group}> <a className="flex gap-2 p-4 rounded border border-custom-border-100 whitespace-nowrap"> <div className="h-3 w-3 rounded-sm" style={{ backgroundColor: STATE_GROUP_COLORS[group.state_group], }} /> <div className="space-y-1 -mt-1"> <p className="text-custom-text-400 text-sm capitalize"> {group.state_group === "unstarted" ? "Not Started" : group.state_group === "started" ? "Working on" : group.state_group} </p> <p className="text-xl font-semibold">{group.state_count}</p> </div> </a> </div> ))} </div> </div> );