37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
/* eslint-disable react/no-unknown-property */
|
|
/* eslint-disable react/prop-types */
|
|
import { Clock, Users, BookOpen } from "lucide-react";
|
|
import { closeIcon } from "../../svgIcons/svgIcons";
|
|
|
|
export const RecipeDetails = ({ recipe, onClose }) => {
|
|
return (
|
|
<div className="modal-overlay">
|
|
<div className="modal-content">
|
|
<button onClick={onClose} className="close-button">
|
|
{closeIcon}
|
|
</button>
|
|
<h2 className="modal-title">{recipe?.title}</h2>
|
|
<img src={recipe?.image} alt={recipe?.title} className="modal-image" />
|
|
<div className="recipe-info">
|
|
<div className="info-item">
|
|
<Clock />
|
|
{recipe?.readyInMinutes || "N/A"} mins
|
|
</div>
|
|
<div className="info-item">
|
|
<Users />
|
|
{recipe?.servings || (recipe?.readyInMinutes > 30 ? "6" : "2")}{" "}
|
|
servings
|
|
</div>
|
|
<div>
|
|
<span>
|
|
<BookOpen /> <b>Directions</b>
|
|
</span>
|
|
<br />
|
|
{recipe?.instructions || "N/A"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|