🤖 Smart Recipe Import

\n \n

\n {(['url', 'text', 'file'] as const).map(mode => (\n setParseMode(mode)}\n className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${\n parseMode === mode\n ? 'bg-blue-600 text-white'\n : 'bg-white text-blue-600 border border-blue-300 hover:bg-blue-50'\n }`}\n >\n {mode === 'url' && '🔗 URL'}\n {mode === 'text' && '📝 Text'}\n {mode === 'file' && '📄 File'}\n \n ))}\n

\n\n {parseMode === 'url' && (\n

\n setParseInput(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n )}\n\n {parseMode === 'text' && (\n

\n setParseInput(e.target.value)}\n rows={4}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n )}\n\n {parseMode === 'file' && (\n

\n \n

\n 📷 Images (JPG, PNG, etc.) or 📄 PDF files supported\n

\n {uploadedFile && (\n

\n ✅\n \n {uploadedFile.type.startsWith('image/') ? '📷' : '📄'} \n {uploadedFile.name} uploaded and ready to parse\n \n

\n )}\n

\n )}\n\n \n {loading ? (\n <>\n

\n Parsing...\n \n ) : (\n '🔍 Parse Recipe'\n )}\n \n

\n );\n\n return (\n

\n {isEditing ? '✏️ Edit Recipe' : '➕ Add New Recipe'}\n

\n \n ✕\n \n

\n\n {!isEditing && renderParseSection()}\n\n {error && (\n

⚠️

{error}

\n )}\n\n

\n {/* Basic Info */}\n

\n \n Recipe Title *\n \n handleInputChange('title', e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"Enter recipe title\"\n required\n />\n

\n\n

\n \n Description\n \n handleInputChange('description', e.target.value)}\n rows={2}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"Brief description of the recipe\"\n />\n

\n\n

\n \n Servings\n \n handleInputChange('servings', e.target.value ? parseInt(e.target.value) : undefined)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"4\"\n min=\"1\"\n />\n

\n\n

\n \n Difficulty\n \n handleInputChange('difficulty', e.target.value || undefined)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n \n

\n\n

\n \n Prep Time (minutes)\n \n handleInputChange('prepTime', e.target.value ? parseInt(e.target.value) : undefined)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"15\"\n min=\"0\"\n />\n

\n\n

\n \n Cook Time (minutes)\n \n handleInputChange('cookTime', e.target.value ? parseInt(e.target.value) : undefined)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"30\"\n min=\"0\"\n />\n

\n\n

\n \n Tags (comma-separated)\n \n handleTagsChange(e.target.value)}\n onBlur={handleTagInputBlur}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"vegetarian, quick, healthy\"\n />\n {formData.tags && formData.tags.length > 0 && (\n

\n {formData.tags.map((tag, index) => (\n \n {tag}\n {\n const newTags = formData.tags?.filter((_, i) => i !== index) || [];\n handleInputChange('tags', newTags);\n setTagInput(newTags.join(', '));\n }}\n className=\"ml-1 text-blue-600 hover:text-blue-800\"\n >\n ×\n \n \n ))}\n

\n )}\n

\n\n {/* Ingredients */}\n

🥕 Ingredients *

\n \n + Add Ingredient\n \n

\n\n

\n {(formData.ingredients || []).map((ingredient, index) => (\n

\n handleIngredientChange(index, 'name', e.target.value)}\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n handleIngredientChange(index, 'amount', e.target.value)}\n className=\"w-20 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n handleIngredientChange(index, 'unit', e.target.value)}\n className=\"w-20 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n removeIngredient(index)}\n className=\"text-red-500 hover:text-red-700 p-2\"\n >\n 🗑️\n \n

\n ))}\n

\n\n {/* Steps */}\n

👩‍🍳 Cooking Steps *

\n \n + Add Step\n \n

\n\n

\n {(formData.steps || []).map((step, index) => (\n

\n {index + 1}\n

\n handleStepChange(index, e.target.value)}\n rows={2}\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n removeStep(index)}\n className=\"text-red-500 hover:text-red-700 p-2 mt-2\"\n >\n 🗑️\n \n

\n ))}\n

\n\n {/* Source */}\n

\n \n Source\n \n handleInputChange('source', e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"Recipe source (URL, book, etc.)\"\n />\n

\n\n {/* Submit Buttons */}\n

\n \n {loading ? (\n <>\n

\n Saving...\n \n ) : (\n <>\n 💾 {isEditing ? 'Update Recipe' : 'Save Recipe'}\n \n )}\n \n \n Cancel\n \n

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