To fix the background for each of the 4 TaskCards, you need to define a color for the background based on the category prop. Right now, you're using ${background} without defining background, so it will throw an error or render nothing.
✅ Step-by-step fix:
🔹 Step 1: Define a background color for each category
You can create a simple object or function to return a background class based on the category name.
🔹 Solution using an object map:
// Inside TaskCard.js
const backgroundClasses = {
"To Do": "bg-blue-100",
"In Progress": "bg-yellow-100",
Completed: "bg-green-100",
Blocked: "bg-red-100",
};🔹 Step 2: Use it in your component
Update your TaskCard component like this:
export default function TaskCard({ category }) {
const backgroundClasses = {
"To Do": "bg-blue-100",
"In Progress": "bg-yellow-100",
Completed: "bg-green-100",
Blocked: "bg-red-100",
};
const background = backgroundClasses[category] || "bg-gray-100"; // fallback
return (
<div className="mb-4 w-full px-2 sm:w-1/2 md:w-1/4">
<div className={`rounded-lg ${background} p-4`}>
<div className="mb-2 flex items-center justify-between">
<h3 className="text-lg font-semibold">
{category} ({tasksData[category].length})
</h3>
<SortingBtn />
</div>
<div>
{tasksData[category].map((task) => (
<Task key={task.id} task={task} />
))}
</div>
</div>
</div>
);
}This will apply a specific background color to each card based on its category.
Would you like to use Tailwind custom colors instead of default utility classes?