ejemplo.jsx

import "./App.css";
import Container from "react-bootstrap/Container";
import { Card, CardTitle, CardBody } from "react-bootstrap";

const menusDatabase = {
  name: "mvp",
  days: [
    {
      day: "lunes",
      desa: "desa1",
      comida: "comida1",
      cena: "cena1",
    },
    {
      day: "martes",
      desa: "desa1",
      comida: "comida1",
      cena: "cena1",
    },
    {
      day: "miercoles",
      desa: "desa1",
      comida: "comida1",
      cena: "cena1",
    },
    {
      day: "jueves",
      desa: "desa1",
      comida: "comida1",
      cena: "cena1",
    },
    {
      day: "viernes",
      desa: "desa1",
      comida: "comida1",
      cena: "cena1",
    },
    {
      day: "sabado",
      desa: "desa1",
      comida: "comida1",
      cena: "cena1",
    },
    {
      day: "domingo",
      desa: "desa1",
      comida: "comida1",
      cena: "cena1",
    },
  ],
};

export function Recipi({ titulo, meal }) {
  return (
    <div className="p-4">
      <p className="text-center">{meal}</p>
      <img src="https://via.placeholder.com/200" alt="imagen" />
      <p>{titulo}</p>
    </div>
  );
}

export function Dia({ name }) {
  return (
    <Card className="p-3">
      <CardTitle className="text-center ">
        <h1>{name}</h1>
      </CardTitle>
      <CardBody className="d-flex justify-content-center">
        <Recipi titulo="titulo receta" meal="desayuno" />
        <Recipi titulo="titulo receta" meal="comida" />
        <Recipi titulo="titulo receta" meal="cena" />
      </CardBody>
    </Card>
  );
}

function Detail() {
  return (
    <Container>
      {menusDatabase.days.map((menu) => {
        return (
          <div  key={menu.day} className="p-4">
            <Dia name={menu.day} />
          </div>
        );
      })}
    </Container>
  );
}

export default Detail;