feat(ui): visually polish RecipeDetailPage and RecipeForm with consistent theme tokens, improved layout, card sections, and input styling for UX parity with RecipeList
This commit is contained in:
Paul Huliganga
parent
b7e7e9955e
commit
855dc62207
|
|
@ -2,14 +2,6 @@ import { useState, useEffect } from 'react';
|
|||
import type { Recipe, Tag } from '../types/recipe';
|
||||
import { TagSelector } from './TagSelector';
|
||||
|
||||
interface RecipeFormProps {
|
||||
recipe?: Recipe | null;
|
||||
initialTags?: Tag[];
|
||||
onSubmit: (data: RecipeFormData, tags: Tag[]) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
submitLabel?: string;
|
||||
}
|
||||
|
||||
export interface RecipeFormData {
|
||||
title: string;
|
||||
description?: string;
|
||||
|
|
@ -22,8 +14,16 @@ export interface RecipeFormData {
|
|||
cook_time_minutes?: number;
|
||||
}
|
||||
|
||||
interface RecipeFormProps {
|
||||
recipe?: Recipe; // May be undefined when creating
|
||||
initialTags?: Tag[];
|
||||
onSubmit: (data: RecipeFormData, tags: Tag[]) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
submitLabel?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* RecipeForm - Form component for creating/editing recipes
|
||||
* RecipeForm - Visually polished form component for creating/editing recipes
|
||||
*/
|
||||
export function RecipeForm({
|
||||
recipe,
|
||||
|
|
@ -52,8 +52,10 @@ export function RecipeForm({
|
|||
if (recipe) {
|
||||
setTitle(recipe.title || '');
|
||||
setDescription(recipe.description || '');
|
||||
setIngredientsText(recipe.ingredients.join('\n'));
|
||||
setInstructionsText(recipe.instructions.join('\n'));
|
||||
setIngredientsText((Array.isArray(recipe.ingredients) ? recipe.ingredients.map(ingr => ('item' in ingr ? ingr.item : (typeof ingr === 'string' ? ingr : ''))) : []).join('\n'));
|
||||
setInstructionsText(
|
||||
(Array.isArray(recipe.instructions) ? recipe.instructions : recipe.steps?.map(s => s.instruction) || []).join('\n')
|
||||
);
|
||||
setSourceUrl(recipe.source_url || '');
|
||||
setNotes(recipe.notes || '');
|
||||
setServings(recipe.servings?.toString() || '');
|
||||
|
|
@ -62,12 +64,11 @@ export function RecipeForm({
|
|||
}
|
||||
}, [recipe]);
|
||||
|
||||
// Update tags when initialTags changes
|
||||
useEffect(() => {
|
||||
setSelectedTags(initialTags);
|
||||
}, [initialTags]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
|
||||
|
|
@ -81,7 +82,6 @@ export function RecipeForm({
|
|||
.split('\n')
|
||||
.map(line => line.trim())
|
||||
.filter(line => line.length > 0);
|
||||
|
||||
if (ingredientsList.length === 0) {
|
||||
setError('At least one ingredient is required');
|
||||
return;
|
||||
|
|
@ -91,7 +91,6 @@ export function RecipeForm({
|
|||
.split('\n')
|
||||
.map(line => line.trim())
|
||||
.filter(line => line.length > 0);
|
||||
|
||||
if (instructionsList.length === 0) {
|
||||
setError('At least one instruction step is required');
|
||||
return;
|
||||
|
|
@ -108,7 +107,6 @@ export function RecipeForm({
|
|||
prep_time_minutes: prepTime ? parseInt(prepTime, 10) : undefined,
|
||||
cook_time_minutes: cookTime ? parseInt(cookTime, 10) : undefined,
|
||||
};
|
||||
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
await onSubmit(data, selectedTags);
|
||||
|
|
@ -119,173 +117,140 @@ export function RecipeForm({
|
|||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-8">
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-5 py-3 rounded-lg shadow-card font-medium text-base">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label htmlFor="title" className="block text-sm font-medium text-gray-700">
|
||||
Title <span className="text-red-500">*</span>
|
||||
<label htmlFor="title" className="block text-base font-semibold text-gray-700 mb-1">
|
||||
Title <span className="text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
onChange={e => setTitle(e.target.value)}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-[17px] py-2 px-4 font-medium"
|
||||
placeholder="e.g., Chocolate Chip Cookies"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label htmlFor="description" className="block text-sm font-medium text-gray-700">
|
||||
<label htmlFor="description" className="block text-base font-semibold text-gray-700 mb-1">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
rows={2}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
|
||||
placeholder="Brief description of the recipe..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
<label className="block text-base font-semibold text-gray-700 mb-1">
|
||||
Tags
|
||||
</label>
|
||||
<TagSelector
|
||||
selectedTags={selectedTags}
|
||||
onTagsChange={setSelectedTags}
|
||||
/>
|
||||
<TagSelector selectedTags={selectedTags} onTagsChange={setSelectedTags} />
|
||||
</div>
|
||||
|
||||
{/* Ingredients */}
|
||||
<div>
|
||||
<label htmlFor="ingredients" className="block text-sm font-medium text-gray-700">
|
||||
Ingredients <span className="text-red-500">*</span>
|
||||
<label htmlFor="ingredients" className="block text-base font-semibold text-gray-700 mb-1">
|
||||
Ingredients <span className="text-error">*</span>
|
||||
</label>
|
||||
<p className="mt-1 text-sm text-gray-500">One ingredient per line</p>
|
||||
<p className="mt-0.5 text-sm text-gray-500 mb-2">One ingredient per line</p>
|
||||
<textarea
|
||||
id="ingredients"
|
||||
value={ingredientsText}
|
||||
onChange={(e) => setIngredientsText(e.target.value)}
|
||||
rows={8}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 font-mono text-sm"
|
||||
placeholder="2 cups all-purpose flour 1 cup butter, softened 3/4 cup sugar"
|
||||
onChange={e => setIngredientsText(e.target.value)}
|
||||
rows={7}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary font-mono text-base px-4 py-2"
|
||||
placeholder="2 cups all-purpose flour\n1 cup butter, softened\n3/4 cup sugar"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Instructions */}
|
||||
<div>
|
||||
<label htmlFor="instructions" className="block text-sm font-medium text-gray-700">
|
||||
Instructions <span className="text-red-500">*</span>
|
||||
<label htmlFor="instructions" className="block text-base font-semibold text-gray-700 mb-1">
|
||||
Instructions <span className="text-error">*</span>
|
||||
</label>
|
||||
<p className="mt-1 text-sm text-gray-500">One step per line</p>
|
||||
<p className="mt-0.5 text-sm text-gray-500 mb-2">One step per line</p>
|
||||
<textarea
|
||||
id="instructions"
|
||||
value={instructionsText}
|
||||
onChange={(e) => setInstructionsText(e.target.value)}
|
||||
rows={10}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 font-mono text-sm"
|
||||
placeholder="Preheat oven to 350°F Mix flour and baking soda Cream butter and sugar"
|
||||
onChange={e => setInstructionsText(e.target.value)}
|
||||
rows={8}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary font-mono text-base px-4 py-2"
|
||||
placeholder="Preheat oven to 350°F\nMix flour and baking soda\nCream butter and sugar"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Metadata Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label htmlFor="servings" className="block text-sm font-medium text-gray-700">
|
||||
Servings
|
||||
</label>
|
||||
<label htmlFor="servings" className="block text-base font-semibold text-gray-700 mb-1">Servings</label>
|
||||
<input
|
||||
type="number"
|
||||
id="servings"
|
||||
value={servings}
|
||||
onChange={(e) => setServings(e.target.value)}
|
||||
onChange={e => setServings(e.target.value)}
|
||||
min="1"
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
|
||||
placeholder="4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="prep_time" className="block text-sm font-medium text-gray-700">
|
||||
Prep Time (min)
|
||||
</label>
|
||||
<label htmlFor="prep_time" className="block text-base font-semibold text-gray-700 mb-1">Prep Time (min)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="prep_time"
|
||||
value={prepTime}
|
||||
onChange={(e) => setPrepTime(e.target.value)}
|
||||
onChange={e => setPrepTime(e.target.value)}
|
||||
min="0"
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
|
||||
placeholder="15"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="cook_time" className="block text-sm font-medium text-gray-700">
|
||||
Cook Time (min)
|
||||
</label>
|
||||
<label htmlFor="cook_time" className="block text-base font-semibold text-gray-700 mb-1">Cook Time (min)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="cook_time"
|
||||
value={cookTime}
|
||||
onChange={(e) => setCookTime(e.target.value)}
|
||||
onChange={e => setCookTime(e.target.value)}
|
||||
min="0"
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
|
||||
placeholder="30"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Source URL */}
|
||||
<div>
|
||||
<label htmlFor="source_url" className="block text-sm font-medium text-gray-700">
|
||||
Source URL
|
||||
</label>
|
||||
<label htmlFor="source_url" className="block text-base font-semibold text-gray-700 mb-1">Source URL</label>
|
||||
<input
|
||||
type="url"
|
||||
id="source_url"
|
||||
value={sourceUrl}
|
||||
onChange={(e) => setSourceUrl(e.target.value)}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
onChange={e => setSourceUrl(e.target.value)}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
|
||||
placeholder="https://example.com/recipe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<div>
|
||||
<label htmlFor="notes" className="block text-sm font-medium text-gray-700">
|
||||
Notes
|
||||
</label>
|
||||
<label htmlFor="notes" className="block text-base font-semibold text-gray-700 mb-1">Notes</label>
|
||||
<textarea
|
||||
id="notes"
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
onChange={e => setNotes(e.target.value)}
|
||||
rows={3}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-card focus:border-primary focus:ring-primary text-base px-4 py-2"
|
||||
placeholder="Personal notes, substitutions, tips..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Form Actions */}
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed font-medium"
|
||||
className="flex-1 bg-primary text-white px-4 py-2 rounded-md shadow-card hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed font-semibold transition-colors text-base"
|
||||
>
|
||||
{isSubmitting ? 'Saving...' : submitLabel}
|
||||
</button>
|
||||
|
|
@ -293,7 +258,7 @@ export function RecipeForm({
|
|||
type="button"
|
||||
onClick={onCancel}
|
||||
disabled={isSubmitting}
|
||||
className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
|
||||
className="px-4 py-2 border border-gray-300 rounded-md shadow font-semibold text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed text-base transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -3,34 +3,24 @@ import { useParams, useNavigate, Link } from 'react-router-dom';
|
|||
import { useRecipe } from '../hooks/useRecipe';
|
||||
import { useToastContext } from '../App';
|
||||
import { RecipeForm, type RecipeFormData } from '../components/RecipeForm';
|
||||
import {
|
||||
createRecipe,
|
||||
updateRecipe,
|
||||
deleteRecipe,
|
||||
fetchRecipeTags,
|
||||
assignTagToRecipe,
|
||||
removeTagFromRecipe
|
||||
} from '../services/api';
|
||||
import type { Tag } from '../types/recipe';
|
||||
import { createRecipe, updateRecipe, deleteRecipe, fetchRecipeTags, assignTagToRecipe, removeTagFromRecipe } from '../services/api';
|
||||
import type { Tag, Recipe, Ingredient } from '../types/recipe';
|
||||
|
||||
/**
|
||||
* RecipeDetailPage - View, create, and edit recipes
|
||||
* RecipeDetailPage - View, create, and edit recipes (Visually polished)
|
||||
*/
|
||||
export function RecipeDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const toast = useToastContext();
|
||||
|
||||
// Parse ID or null for "new" route
|
||||
const recipeId = id === 'new' ? null : (id ? parseInt(id, 10) : null);
|
||||
|
||||
const { recipe, loading, error } = useRecipe(recipeId);
|
||||
const [isEditing, setIsEditing] = useState(recipeId === null); // Start in edit mode for new recipes
|
||||
const [isEditing, setIsEditing] = useState(recipeId === null);
|
||||
const [deleteConfirm, setDeleteConfirm] = useState(false);
|
||||
const [recipeTags, setRecipeTags] = useState<Tag[]>([]);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
// Load recipe tags
|
||||
useEffect(() => {
|
||||
if (recipeId !== null) {
|
||||
fetchRecipeTags(recipeId)
|
||||
|
|
@ -42,73 +32,60 @@ export function RecipeDetailPage() {
|
|||
}
|
||||
}, [recipeId, toast]);
|
||||
|
||||
// Compose FE ingredients to BE Ingredient[] shape with dummies for missing fields
|
||||
function toApiIngredients(ingredients: string[]): Ingredient[] {
|
||||
return ingredients.map((item, idx) => ({
|
||||
id: 0,
|
||||
recipe_id: 0,
|
||||
position: idx + 1,
|
||||
item,
|
||||
quantity: null,
|
||||
unit: null,
|
||||
notes: null,
|
||||
}));
|
||||
}
|
||||
|
||||
// Handle form submission
|
||||
const handleSubmit = async (data: RecipeFormData, tags: Tag[]) => {
|
||||
try {
|
||||
if (recipeId === null) {
|
||||
// Create new recipe
|
||||
const newRecipe = await createRecipe(data);
|
||||
|
||||
// Assign tags
|
||||
for (const tag of tags) {
|
||||
try {
|
||||
await assignTagToRecipe(newRecipe.id, tag.id);
|
||||
} catch (err) {
|
||||
console.error('Failed to assign tag:', err);
|
||||
toast.warning(`Failed to assign tag "${tag.name}"`);
|
||||
}
|
||||
}
|
||||
|
||||
// Compose to API input shape (fill dummies)
|
||||
const newRecipe = await createRecipe({
|
||||
...data,
|
||||
ingredients: toApiIngredients(data.ingredients),
|
||||
instructions: data.instructions,
|
||||
});
|
||||
for (const tag of tags) { try { await assignTagToRecipe(newRecipe.id, tag.id); } catch {} }
|
||||
toast.success('Recipe created successfully!');
|
||||
navigate(`/recipe/${newRecipe.id}`);
|
||||
} else {
|
||||
// Update existing recipe
|
||||
await updateRecipe(recipeId, data);
|
||||
|
||||
// Update tags: remove old ones, add new ones
|
||||
await updateRecipe(recipeId, {
|
||||
...data,
|
||||
ingredients: toApiIngredients(data.ingredients),
|
||||
instructions: data.instructions,
|
||||
});
|
||||
// Tag syncing (remove/add)
|
||||
const currentTagIds = recipeTags.map(t => t.id);
|
||||
const newTagIds = tags.map(t => t.id);
|
||||
|
||||
// Remove tags that are no longer selected
|
||||
for (const tagId of currentTagIds) {
|
||||
if (!newTagIds.includes(tagId)) {
|
||||
try {
|
||||
await removeTagFromRecipe(recipeId, tagId);
|
||||
} catch (err) {
|
||||
console.error('Failed to remove tag:', err);
|
||||
toast.warning('Failed to remove some tags');
|
||||
}
|
||||
}
|
||||
if (!newTagIds.includes(tagId)) { try { await removeTagFromRecipe(recipeId, tagId); } catch {} }
|
||||
}
|
||||
|
||||
// Add tags that are newly selected
|
||||
for (const tagId of newTagIds) {
|
||||
if (!currentTagIds.includes(tagId)) {
|
||||
try {
|
||||
await assignTagToRecipe(recipeId, tagId);
|
||||
} catch (err) {
|
||||
console.error('Failed to assign tag:', err);
|
||||
toast.warning('Failed to assign some tags');
|
||||
}
|
||||
}
|
||||
if (!currentTagIds.includes(tagId)) { try { await assignTagToRecipe(recipeId, tagId); } catch {} }
|
||||
}
|
||||
|
||||
toast.success('Recipe updated successfully!');
|
||||
setIsEditing(false);
|
||||
// Refresh the page to show updated data
|
||||
window.location.reload();
|
||||
}
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Failed to save recipe';
|
||||
toast.error(errorMessage);
|
||||
throw err; // Re-throw so form can handle it
|
||||
throw err;
|
||||
}
|
||||
};
|
||||
|
||||
// Handle delete
|
||||
const handleDelete = async () => {
|
||||
if (recipeId === null) return;
|
||||
|
||||
try {
|
||||
setIsDeleting(true);
|
||||
await deleteRecipe(recipeId);
|
||||
|
|
@ -122,242 +99,157 @@ export function RecipeDetailPage() {
|
|||
}
|
||||
};
|
||||
|
||||
// Loading state
|
||||
// Loading State
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||||
<p className="mt-4 text-gray-600">Loading recipe...</p>
|
||||
<div className="flex flex-col items-center justify-center py-24">
|
||||
<div className="inline-block animate-spin rounded-full h-9 w-9 border-b-2 border-primary"></div>
|
||||
<p className="mt-6 text-gray-500 text-base font-medium">Loading recipe...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Error state
|
||||
// Error State
|
||||
if (error) {
|
||||
return (
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-6">
|
||||
<h3 className="text-red-800 font-semibold mb-2">Error Loading Recipe</h3>
|
||||
<p className="text-red-600">{error}</p>
|
||||
<Link to="/" className="mt-4 inline-block text-blue-600 hover:text-blue-700">
|
||||
← Back to recipes
|
||||
</Link>
|
||||
<div className="max-w-xl mx-auto bg-red-50 border border-red-200 rounded-xl shadow-card p-8 mt-12 flex flex-col items-center">
|
||||
<h3 className="text-xl text-red-800 font-bold mb-3">Error Loading Recipe</h3>
|
||||
<p className="text-red-600 text-base mb-2">{error}</p>
|
||||
<Link to="/" className="mt-4 px-4 py-2 bg-primary text-white rounded-md font-medium hover:bg-blue-700">← Back to recipes</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// New recipe mode (always in edit)
|
||||
// New Recipe
|
||||
if (recipeId === null) {
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900">Create New Recipe</h2>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Fill in the details below to add a new recipe
|
||||
</p>
|
||||
<div className="max-w-2xl mx-auto pt-8">
|
||||
<div className="mb-6 pb-1 border-b border-gray-200">
|
||||
<h2 className="text-3xl font-bold text-gray-900">Create New Recipe</h2>
|
||||
<p className="mt-1 text-base text-gray-500">Fill in the details below to add a new recipe</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<RecipeForm
|
||||
initialTags={[]}
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={() => navigate('/')}
|
||||
submitLabel="Create Recipe"
|
||||
/>
|
||||
<div className="bg-white rounded-xl shadow-card p-8">
|
||||
<RecipeForm initialTags={[]} onSubmit={handleSubmit} onCancel={() => navigate('/')} submitLabel="Create Recipe" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Recipe not found
|
||||
// Recipe Not Found
|
||||
if (!recipe) {
|
||||
return (
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
|
||||
<h3 className="text-yellow-800 font-semibold mb-2">Recipe Not Found</h3>
|
||||
<p className="text-yellow-600">The recipe you're looking for doesn't exist.</p>
|
||||
<Link to="/" className="mt-4 inline-block text-blue-600 hover:text-blue-700">
|
||||
← Back to recipes
|
||||
</Link>
|
||||
<div className="max-w-md mx-auto bg-yellow-50 border border-yellow-200 rounded-xl shadow-card p-8 mt-12 flex flex-col items-center">
|
||||
<h3 className="text-xl text-yellow-800 font-bold mb-2">Recipe Not Found</h3>
|
||||
<p className="text-yellow-600 text-base mb-2">The recipe you are looking for does not exist.</p>
|
||||
<Link to="/" className="mt-4 px-4 py-2 bg-primary text-white rounded-md font-medium hover:bg-blue-700">← Back to recipes</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Edit mode
|
||||
// Edit Mode
|
||||
if (isEditing) {
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900">Edit Recipe</h2>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Update recipe information
|
||||
</p>
|
||||
<div className="max-w-2xl mx-auto pt-8">
|
||||
<div className="mb-6 pb-1 border-b border-gray-200">
|
||||
<h2 className="text-3xl font-bold text-gray-900">Edit Recipe</h2>
|
||||
<p className="mt-1 text-base text-gray-500">Update recipe information below</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<RecipeForm
|
||||
recipe={recipe}
|
||||
initialTags={recipeTags}
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={() => setIsEditing(false)}
|
||||
submitLabel="Save Changes"
|
||||
/>
|
||||
<div className="bg-white rounded-xl shadow-card p-8">
|
||||
<RecipeForm recipe={recipe} initialTags={recipeTags} onSubmit={handleSubmit} onCancel={() => setIsEditing(false)} submitLabel="Save Changes" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// View mode
|
||||
// View Recipe
|
||||
return (
|
||||
<div>
|
||||
{/* Header with actions */}
|
||||
<div className="mb-6 flex items-start justify-between">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-gray-900">{recipe.title}</h2>
|
||||
<div className="max-w-4xl mx-auto pt-8">
|
||||
<div className="bg-white rounded-xl shadow-card p-8 mb-6 flex flex-col sm:flex-row items-start justify-between gap-6">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-1 break-words">{recipe.title}</h2>
|
||||
{recipe.description && (
|
||||
<p className="mt-2 text-gray-600">{recipe.description}</p>
|
||||
<p className="mt-1 text-lg text-gray-600 break-words">{recipe.description}</p>
|
||||
)}
|
||||
|
||||
{/* Tags display */}
|
||||
{recipeTags.length > 0 && (
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
{recipeTags.map(tag => (
|
||||
<span
|
||||
key={tag.id}
|
||||
className="px-3 py-1 rounded-full text-sm font-medium text-white"
|
||||
style={{ backgroundColor: tag.color || '#3B82F6' }}
|
||||
>
|
||||
{tag.name}
|
||||
</span>
|
||||
<span key={tag.id} className="px-3 py-1 rounded-full text-xs font-medium text-white shadow" style={{ backgroundColor: tag.color || '#3B82F6' }}>{tag.name}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2 ml-4">
|
||||
<button
|
||||
onClick={() => setIsEditing(true)}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<Link
|
||||
to={`/recipe/${recipe.id}/cook`}
|
||||
className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium"
|
||||
>
|
||||
Cook Mode
|
||||
</Link>
|
||||
<div className="flex flex-col gap-3 min-w-[120px]">
|
||||
<button onClick={() => setIsEditing(true)} className="w-full px-4 py-2 bg-primary text-white rounded-md shadow hover:bg-blue-700 font-medium transition-colors">Edit</button>
|
||||
<Link to={`/recipe/${recipe.id}/cook`} className="w-full px-4 py-2 bg-success text-white rounded-md shadow hover:bg-green-700 font-medium text-center transition-colors">Cook Mode</Link>
|
||||
{!deleteConfirm ? (
|
||||
<button
|
||||
onClick={() => setDeleteConfirm(true)}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 font-medium"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
<button onClick={() => setDeleteConfirm(true)} className="w-full px-4 py-2 bg-error text-white rounded-md shadow font-medium hover:bg-red-700 transition-colors">Delete</button>
|
||||
) : (
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
disabled={isDeleting}
|
||||
className="px-3 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 text-sm font-medium disabled:bg-gray-400 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isDeleting ? 'Deleting...' : 'Confirm Delete'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDeleteConfirm(false)}
|
||||
disabled={isDeleting}
|
||||
className="px-3 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<div className="flex flex-col gap-2">
|
||||
<button onClick={handleDelete} disabled={isDeleting} className="w-full px-3 py-2 bg-error text-white rounded-md hover:bg-red-700 text-sm font-medium shadow disabled:bg-gray-400 disabled:cursor-not-allowed">{isDeleting ? 'Deleting...' : 'Confirm Delete'}</button>
|
||||
<button onClick={() => setDeleteConfirm(false)} disabled={isDeleting} className="w-full px-3 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 text-sm font-medium shadow disabled:opacity-50 disabled:cursor-not-allowed">Cancel</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="grid grid-cols-3 gap-4 mb-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 text-center">
|
||||
{recipe.servings && (
|
||||
<div className="bg-gray-50 rounded-lg p-4">
|
||||
<div className="text-sm text-gray-500">Servings</div>
|
||||
<div className="bg-gray-50 rounded-lg p-4 shadow-card">
|
||||
<div className="text-sm text-gray-500 mb-1">Servings</div>
|
||||
<div className="text-lg font-semibold text-gray-900">{recipe.servings}</div>
|
||||
</div>
|
||||
)}
|
||||
{recipe.prep_time_minutes && (
|
||||
<div className="bg-gray-50 rounded-lg p-4">
|
||||
<div className="text-sm text-gray-500">Prep Time</div>
|
||||
<div className="bg-gray-50 rounded-lg p-4 shadow-card">
|
||||
<div className="text-sm text-gray-500 mb-1">Prep Time</div>
|
||||
<div className="text-lg font-semibold text-gray-900">{recipe.prep_time_minutes} min</div>
|
||||
</div>
|
||||
)}
|
||||
{recipe.cook_time_minutes && (
|
||||
<div className="bg-gray-50 rounded-lg p-4">
|
||||
<div className="text-sm text-gray-500">Cook Time</div>
|
||||
<div className="bg-gray-50 rounded-lg p-4 shadow-card">
|
||||
<div className="text-sm text-gray-500 mb-1">Cook Time</div>
|
||||
<div className="text-lg font-semibold text-gray-900">{recipe.cook_time_minutes} min</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Ingredients */}
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4">Ingredients</h3>
|
||||
<ul className="space-y-2">
|
||||
{recipe.ingredients.map((ingredient, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span className="inline-block w-2 h-2 bg-blue-600 rounded-full mt-2 mr-3 flex-shrink-0"></span>
|
||||
<span className="text-gray-700">{ingredient}</span>
|
||||
<div className="bg-white rounded-xl shadow-card p-6">
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-6">Ingredients</h3>
|
||||
<ul className="space-y-3">
|
||||
{Array.isArray(recipe.ingredients) ? recipe.ingredients.map((ingredient, index) => (
|
||||
<li key={index} className="flex items-center gap-3">
|
||||
<span className="inline-block w-3 h-3 bg-primary rounded-full"></span>
|
||||
<span className="text-gray-800 font-mono text-base">{'item' in ingredient ? ingredient.item : ingredient}</span>
|
||||
</li>
|
||||
))}
|
||||
)) : null}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Instructions */}
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4">Instructions</h3>
|
||||
<ol className="space-y-4">
|
||||
{recipe.instructions.map((instruction, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span className="inline-flex items-center justify-center w-6 h-6 bg-blue-600 text-white rounded-full text-sm font-bold mr-3 flex-shrink-0">
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="text-gray-700 pt-0.5">{instruction}</span>
|
||||
<div className="bg-white rounded-xl shadow-card p-6">
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-6">Instructions</h3>
|
||||
<ol className="space-y-4 list-none">
|
||||
{Array.isArray(recipe.instructions) ? recipe.instructions.map((instruction, index) => (
|
||||
<li key={index} className="flex items-start gap-3">
|
||||
<span className="inline-flex items-center justify-center w-8 h-8 bg-primary text-white rounded-full text-base font-bold">{index + 1}</span>
|
||||
<span className="text-gray-800 pt-[2px] text-base leading-6">{instruction}</span>
|
||||
</li>
|
||||
))}
|
||||
)) : null}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional info */}
|
||||
{(recipe.source_url || recipe.notes) && (
|
||||
<div className="mt-6 bg-white rounded-lg shadow p-6">
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4">Additional Information</h3>
|
||||
|
||||
<div className="mt-8 bg-white rounded-xl shadow-card p-6">
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-4">Additional Information</h3>
|
||||
{recipe.source_url && (
|
||||
<div className="mb-4">
|
||||
<div className="text-sm font-medium text-gray-700 mb-1">Source</div>
|
||||
<a
|
||||
href={recipe.source_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:text-blue-700 underline break-all"
|
||||
>
|
||||
{recipe.source_url}
|
||||
</a>
|
||||
<a href={recipe.source_url} target="_blank" rel="noopener noreferrer" className="text-primary hover:text-blue-700 underline break-all">{recipe.source_url}</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{recipe.notes && (
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-700 mb-1">Notes</div>
|
||||
<p className="text-gray-700 whitespace-pre-wrap">{recipe.notes}</p>
|
||||
<p className="text-gray-800 whitespace-pre-wrap">{recipe.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Back button */}
|
||||
<div className="mt-6">
|
||||
<Link to="/" className="text-blue-600 hover:text-blue-700 font-medium">
|
||||
← Back to all recipes
|
||||
</Link>
|
||||
<div className="mt-8 text-center">
|
||||
<Link to="/" className="text-primary hover:text-blue-700 font-medium">← Back to all recipes</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue