Recipe Modal - Copy this React, Tailwind Component to your project

Transforms col md 6 into pages that can be browsed with animation, import React, { useState } from 'react'; import { Modal, Button } from 'react bootstrap'; import recipeBookImage from './assets/img/libro.png'; import './index.css'; function RecipeModal({ show, onClose, meal }) { const [currentPage, setCurrentPage] = useState(0); // Divide le istruzioni solo se superano i 800 caratteri const instructions = meal?.strInstructions || ""; const instructionsPart1 = instructions.slice(0, 800); const instructionsPart2 = instructions.length > 800 ? instructions.slice(800) : null; const handleNext = () => { if (currentPage < 1) { setCurrentPage(currentPage + 1); } }; const handlePrev = () => { if (currentPage > 0) { setCurrentPage(currentPage 1); } }; return ( <Modal show={show} onHide={onClose} size="lg" centered> {meal && ( <> <Modal.Header closeButton> <Modal.Title>{meal.strMeal}</Modal.Title> </Modal.Header> <Modal.Body style={{ backgroundImage: `url(${recipeBookImage})`, backgroundSize: 'cover', backgroundPosition: 'center', color: 'black', padding: '20px', height: '550px' }}> {currentPage === 0 && ( <div className="row"> <div className="col md 6 text center"> <img src={meal.strMealThumb} className="img fluid mb 2" alt={meal.strMeal} style={{ maxWidth: '80%', height: 'auto' }} /> <h5><strong>Categoria:</strong> {meal.strCategory}</h5> <h5><strong>Area:</strong> {meal.strArea}</h5> </div> <div className="col md 6"> <h5><strong>Ingredienti:</strong></h5> <ul> {Object.keys(meal) .filter((key) => key.includes("strIngredient") && meal[key]) .map((key, index) => ( <li key={index}>{meal[key]} {meal[`strMeasure${index + 1}`]}</li> ))} </ul> </div> </div> )} {currentPage === 1 && ( <div className="row"> <div className="col md 6"> <h5><strong>Descrizione:</strong></h5> <p>{instructionsPart1}</p> </div> {instructionsPart2 ? ( <div className="col md 6"> <p>{instructionsPart2}</p> </div> ) : ( <div className="col md 6"> {/* Colonna vuota per allineare il layout */} <p></p> </div> )} </div> )} </Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={handlePrev} disabled={currentPage === 0}> Precedente </Button> <Button className='bg orange' variant="primary" onClick={handleNext} disabled={currentPage === 1}> Successivo </Button> <Button variant="danger" onClick={onClose}> Chiudi </Button> </Modal.Footer> </> )} </Modal> ); } export default RecipeModal;