Estoy teniendo una pesadilla con algo realmente básico.

He creado una página que muestra algunas recetas, de hecho 7 para cada día de la semana, como generador.

Esto funciona bien en pantallas medianas y superiores, pero como la mesa es horizontal, se formatea horriblemente. Entonces, lo que pensé que era mejor hacer era convertirlo para que los días de la semana se representen como una celda en la fila. Simplemente no puedo entender la mejor manera de hacerlo. Hasta ahora tengo esto:

 const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] {props.recipes.map((recipe) => ( <TableRow component="th" scope="recipes"> {weekdays.map((weekday) => ( <TableCell>{weekday}</TableCell>))} <Link href={`/recipes/${recipe.key}`} passHref> <Card elevation={3} sx={{ maxWidth: 300 }}> <CardActionArea> <CardHeader titleTypographyProps={{ fontWeight: "Bold" }} title={recipe.title} subheader={recipe.description} /> <CardMedia component="img" height="194" image={recipe.image ? recipe.image : "/assets/comingsoon.jpg"} alt="Food" /> </CardActionArea> </Card> </Link> </TableRow>

Cada receta ocupa una nueva fila que es el resultado preferido, pero no puedo crear una celda junto a cada receta respectiva que tenga el día de la semana respectivo

Creé una matriz llamada días de la semana y pensé que podría recorrerla de alguna manera, pero hasta ahora solo agregaba todos los valores a cada celda. Creo que esto es algo tan simple, pero 8 horas me mataron. He adjuntado una captura de pantalla del resultado actual basado en el código anterior Actualmente cómo se ve