Results Component using Next13

Instead of filtering the data array inside <Summary>, you could iterate over the array in <Home>, like this:

<h3 className="text-lg text-black pb-4">Summary</h3>;
{
data.scores.map((score) => {
return <Summary key={score.category} {...score} />;
});
}

The colors could be stored in an object with the category as a key:

const colorsByCategory = {
Reaction: {
bgColor: "bg-red-100",
textColor: "text-red-600",
},
/* ... */
};

Or, you could style the items using data modifiers:

<div
className="data-[category=Reaction]:bg-red-100 data-[category=Reaction]:text-red-600 ..."
data-category={category}
>

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

➨ Replace height:100vh with min-height:100vh in container.

.h-screen {
min-height: 100vh;
}

➨ Give your container some width or more specific max-width as it become very large on larger screens.

➨ You can use accessibility features like aria, sr-only, and title which are accessible to screen readers.

I hope you find this helpful.

Happy coding😄