87 lines
2.2 KiB
JavaScript
87 lines
2.2 KiB
JavaScript
function RecipeDetails({ recipe, onEditClick, onDeleteClick, onShowDeleteModal }) {
|
||
if (!recipe) {
|
||
return (
|
||
<section className="panel placeholder">
|
||
<p>עדיין לא נבחר מתכון. בחר מתכון מהרשימה או צור מתכון חדש.</p>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
const handleDelete = () => {
|
||
onShowDeleteModal(recipe.id, recipe.name);
|
||
};
|
||
|
||
return (
|
||
<section className="panel recipe-card">
|
||
<header className="recipe-header">
|
||
<div>
|
||
<h2>{recipe.name}</h2>
|
||
<p className="recipe-subtitle">
|
||
{translateMealType(recipe.meal_type)} · {recipe.time_minutes} דקות הכנה
|
||
</p>
|
||
</div>
|
||
<div className="pill-row">
|
||
<span className="pill">⏱ {recipe.time_minutes} דק׳</span>
|
||
<span className="pill">🍽 {translateMealType(recipe.meal_type)}</span>
|
||
</div>
|
||
</header>
|
||
|
||
<div className="recipe-body">
|
||
<div className="recipe-column">
|
||
<h3>מצרכים</h3>
|
||
<ul>
|
||
{recipe.ingredients.map((ing, idx) => (
|
||
<li key={idx}>{ing}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="recipe-column">
|
||
<h3>שלבים</h3>
|
||
<ol>
|
||
{recipe.steps.map((step, idx) => (
|
||
<li key={idx}>{step}</li>
|
||
))}
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
{recipe.tags && recipe.tags.length > 0 && (
|
||
<footer className="tags">
|
||
{recipe.tags.map((tag, idx) => (
|
||
<span key={idx} className="tag">
|
||
#{tag}
|
||
</span>
|
||
))}
|
||
</footer>
|
||
)}
|
||
|
||
<div className="recipe-actions">
|
||
<button className="btn ghost small" onClick={() => onEditClick(recipe)}>
|
||
✏️ ערוך
|
||
</button>
|
||
<button className="btn ghost small" onClick={handleDelete}>
|
||
🗑 מחק
|
||
</button>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function translateMealType(type) {
|
||
switch (type) {
|
||
case "breakfast":
|
||
return "בוקר";
|
||
case "lunch":
|
||
return "צהריים";
|
||
case "dinner":
|
||
return "ערב";
|
||
case "snack":
|
||
return "נשנוש";
|
||
default:
|
||
return type;
|
||
}
|
||
}
|
||
|
||
export default RecipeDetails;
|