{/* Color labels header */}
{colors.map((color) => (
{color}
))}
{/* Variant rows */}
{variants.map((variant) => (
{variant.label}
{colors.map((color, colorIndex) => (
{variant.type === "img" ? (
<>
{color.charAt(0).toUpperCase()}
) : (
{variant.content}
)}
))}
))}
{/* Basic avatar group */}
{users.slice(0, 4).map((user) => (
{user.name
.split(" ")
.map((n) => n[0])
.join("")}
))}
{/* Avatar group with counter */}
{users.slice(0, 3).map((user) => (
{user.name
.split(" ")
.map((n) => n[0])
.join("")}
))}
+{users.length - 3}