❓

Recipe not found

\n \n ← Back to Recipes\n \n

\n );\n }\n\n const handleDelete = async () => {\n try {\n const response = await fetch(`/api/recipes/${recipe.id}`, {\n method: 'DELETE'\n });\n \n const data = await response.json();\n \n if (data.success) {\n onDelete(recipe.id!);\n } else {\n alert('Failed to delete recipe: ' + (data.error || 'Unknown error'));\n }\n } catch (error) {\n alert('Network error while deleting recipe');\n }\n };\n\n const toggleStepCheck = (stepIndex: number) => {\n const newChecked = new Set(checkedSteps);\n if (newChecked.has(stepIndex)) {\n newChecked.delete(stepIndex);\n } else {\n newChecked.add(stepIndex);\n }\n setCheckedSteps(newChecked);\n };\n\n const formatTime = (minutes?: number) => {\n if (!minutes) return '';\n if (minutes < 60) return `${minutes} minutes`;\n const hours = Math.floor(minutes / 60);\n const mins = minutes % 60;\n return mins > 0 ? `${hours} hour${hours > 1 ? 's' : ''} ${mins} minutes` : `${hours} hour${hours > 1 ? 's' : ''}`;\n };\n\n const getDifficultyColor = (difficulty?: string) => {\n switch (difficulty) {\n case 'easy': return 'bg-green-100 text-green-800';\n case 'medium': return 'bg-yellow-100 text-yellow-800';\n case 'hard': return 'bg-red-100 text-red-800';\n default: return 'bg-gray-100 text-gray-800';\n }\n };\n\n const adjustIngredientAmount = (amount: string, multiplier: number) => {\n // Try to parse and multiply numeric amounts\n const numMatch = amount.match(/^(\\d+(?:\\.\\d+)?)/);\n if (numMatch) {\n const num = parseFloat(numMatch[1]);\n const adjustedNum = num * multiplier;\n const remainder = amount.replace(numMatch[1], '');\n \n // Format the number nicely\n const formattedNum = adjustedNum % 1 === 0 ? adjustedNum.toString() : adjustedNum.toFixed(2);\n return formattedNum + remainder;\n }\n \n // For fractions or complex amounts, just show original with note\n return multiplier === 1 ? amount : `${amount} (×${multiplier})`;\n };\n\n const formatIngredient = (ingredient: Ingredient, multiplier: number) => {\n const adjustedAmount = adjustIngredientAmount(ingredient.amount, multiplier);\n \n // Check if the amount already contains the unit information\n // This handles cases where AI puts \"4 large slices\" in amount and \"large slices\" in unit\n const amountLower = adjustedAmount.toLowerCase();\n const unitLower = ingredient.unit.toLowerCase();\n \n // If the unit is already contained in the amount, don't repeat it\n if (unitLower && amountLower.includes(unitLower)) {\n return `${adjustedAmount} ${ingredient.name}`;\n }\n \n // If unit is empty or amount is empty, handle gracefully\n if (!ingredient.unit.trim()) {\n return `${adjustedAmount} ${ingredient.name}`;\n }\n \n if (!adjustedAmount.trim()) {\n return `${ingredient.unit} ${ingredient.name}`;\n }\n \n // Normal case: amount + unit + name\n return `${adjustedAmount} ${ingredient.unit} ${ingredient.name}`;\n };\n\n const totalTime = (recipe.prepTime || 0) + (recipe.cookTime || 0);\n\n return (\n

\n {/* Header */}\n

\n \n ← Back to Recipes\n \n \n

\n onEdit(recipe)}\n className=\"bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 text-sm\"\n >\n ✏️ Edit\n \n setDeleteConfirm(true)}\n className=\"bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 text-sm\"\n >\n 🗑️ Delete\n \n

\n\n

{recipe.title}

\n \n {recipe.description && (\n

{recipe.description}

\n )}\n\n {/* Recipe Meta Info */}\n

\n {recipe.servings && (\n

👥

Servings

{recipe.servings}

\n )}\n \n {recipe.prepTime && (\n

⏱️

Prep Time

{formatTime(recipe.prepTime)}

\n )}\n \n {recipe.cookTime && (\n

🔥

Cook Time

{formatTime(recipe.cookTime)}

\n )}\n \n {totalTime > 0 && (\n

⏰

Total Time

{formatTime(totalTime)}

\n )}\n

\n\n {/* Tags and Difficulty */}\n

\n {recipe.difficulty && (\n \n {recipe.difficulty.charAt(0).toUpperCase() + recipe.difficulty.slice(1)}\n \n )}\n \n {recipe.tags?.map(tag => (\n \n #{tag}\n \n ))}\n

\n\n

\n {/* Ingredients */}\n

🥕 Ingredients

\n \n {recipe.servings && (\n

\n Servings:\n setServingMultiplier(parseFloat(e.target.value))}\n className=\"px-2 py-1 border border-gray-300 rounded text-sm\"\n >\n \n \n \n \n \n \n

\n )}\n

\n\n

\n {recipe.ingredients.map((ingredient, index) => (\n

\n {formatIngredient(ingredient, servingMultiplier)}\n

\n {ingredient.notes && (\n

{ingredient.notes}

\n )}\n

\n ))}\n

\n\n {/* Instructions */}\n

👩‍🍳 Instructions

\n \n

\n {recipe.steps.map((step, index) => (\n

\n toggleStepCheck(index)}\n className={`mt-1 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-colors ${\n checkedSteps.has(index)\n ? 'bg-green-500 border-green-500 text-white'\n : 'border-gray-300 hover:border-green-400'\n }`}\n >\n {checkedSteps.has(index) && '✓'}\n \n

\n {step}\n

\n ))}\n

\n\n {/* Progress */}\n {checkedSteps.size > 0 && (\n

\n Progress\n \n {checkedSteps.size} of {recipe.steps.length} steps completed\n \n

\n )}\n

\n\n {/* Footer */}\n {recipe.source && (\n

\n Source: {recipe.source}\n

\n )}\n

\n\n {/* Delete Confirmation Modal */}\n {deleteConfirm && (\n

⚠️

Delete Recipe?

\n Are you sure you want to delete \"{recipe.title}\"? This action cannot be undone.\n

\n \n Delete\n \n setDeleteConfirm(false)}\n className=\"flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400\"\n >\n Cancel\n \n

\n )}\n

\n );\n}","deleted","label",[169,170,150],"frontend","components","permalink","https://www.val.town/x/connnolly/cardamom/code/frontend/components/RecipeView.tsx","extension","actionData","errors"]