Merging in the React Refactor #56
@ -1,8 +1,333 @@
|
|||||||
|
import Banner from "../components/Banner";
|
||||||
|
|
||||||
export default function Create() {
|
export default function Create() {
|
||||||
|
const keyDownHandler = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
e.preventDefault();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<p>Create</p>
|
<Banner content="Create Your Masterpiece" />
|
||||||
|
<div className="mx-4 md:mx-16 my-8">
|
||||||
|
<p className="mb-8">
|
||||||
|
Welcome to the Recipe Creation Wizard! Simply fill in the details about your culinary creation,
|
||||||
|
including the recipe's name, a description, and other specifics like its category, duration,
|
||||||
|
and difficulty. Don't forget to dynamically add all your ingredients and instructions using
|
||||||
|
the dedicated buttons, and feel free to upload an appealing image. All required fields are
|
||||||
|
marked with an <span className="text-red-500">*</span>. Once everything looks perfect, just hit the "Create Recipe"
|
||||||
|
button to
|
||||||
|
share your masterpiece!
|
||||||
|
</p>
|
||||||
|
<form>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<label htmlFor="title" className="text-sm">
|
||||||
|
Recipe Title
|
||||||
|
<span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<p className="text-xs pt-1 pb-2 text-gray-700">
|
||||||
|
Please provide a unique title for your recipe. This is the most important part!
|
||||||
|
</p>
|
||||||
|
<input
|
||||||
|
onKeyDown={keyDownHandler}
|
||||||
|
className="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500
|
||||||
|
focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500"
|
||||||
|
type="text"
|
||||||
|
id="title"
|
||||||
|
name="title"
|
||||||
|
required
|
||||||
|
maxLength={128}
|
||||||
|
minLength={1}
|
||||||
|
placeholder="e.g., Classic Chicken Curry"
|
||||||
|
/>
|
||||||
|
<p className="hidden peer-invalid:block text-xs text-red-500 my-1">Please enter a title. Between 1-128 characters.</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col my-4">
|
||||||
|
<label htmlFor="description" className="text-sm">
|
||||||
|
Description
|
||||||
|
<span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<p className="text-xs pt-1 pb-2 text-gray-700">
|
||||||
|
Please provide a description for your recipe. This can be short and sweet or long and detailed!
|
||||||
|
</p>
|
||||||
|
<textarea
|
||||||
|
className="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500
|
||||||
|
focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm invalid:border-red-500"
|
||||||
|
id="description"
|
||||||
|
name="description"
|
||||||
|
rows={4}
|
||||||
|
required
|
||||||
|
maxLength={1024}
|
||||||
|
minLength={1}
|
||||||
|
placeholder="A brief description of your delicious recipe..."
|
||||||
|
></textarea>
|
||||||
|
<p className="hidden peer-invalid:block text-xs text-red-500 my-1">
|
||||||
|
Please enter a description. Between 1-1000 characters.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="my-4 flex flex-col gap-x-2">
|
||||||
|
<div className="flex flex-col flex-grow">
|
||||||
|
<label htmlFor="tags" className="text-sm">
|
||||||
|
Recipe Tags
|
||||||
|
</label>
|
||||||
|
<p className="text-xs pt-1 pb-2 text-gray-700">
|
||||||
|
Please provide a list of tags. <span className="italic">e.g., easy, dairy-free, gluten-free, high protein.</span>
|
||||||
|
</p>
|
||||||
|
<input
|
||||||
|
onKeyDown={keyDownHandler}
|
||||||
|
className="border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm"
|
||||||
|
maxLength={32}
|
||||||
|
enterKeyHint="done"
|
||||||
|
type="text"
|
||||||
|
id="tag"
|
||||||
|
name="tag"
|
||||||
|
placeholder="e.g., Healthy"
|
||||||
|
/>
|
||||||
|
<input type="hidden" name="tags" id="tags" value="" />
|
||||||
|
</div>
|
||||||
|
<ul id="tag-list" className="my-2 flex gap-1 flex-wrap"></ul>
|
||||||
|
</div>
|
||||||
|
<div className="my-4 flex gap-x-2">
|
||||||
|
<div className="flex flex-col flex-grow w-1/3">
|
||||||
|
<label htmlFor="preparation-time" className="text-sm">
|
||||||
|
Prep Time
|
||||||
|
<span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<p className="text-xs pt-1 pb-2 text-gray-700">
|
||||||
|
Please provide the estimated prep time (minutes).
|
||||||
|
</p>
|
||||||
|
<input
|
||||||
|
onKeyDown={keyDownHandler}
|
||||||
|
className="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500
|
||||||
|
focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500"
|
||||||
|
type="number"
|
||||||
|
id="preparation-time"
|
||||||
|
name="preparation-time"
|
||||||
|
required
|
||||||
|
min="0"
|
||||||
|
max="120"
|
||||||
|
placeholder="e.g., 20"
|
||||||
|
/>
|
||||||
|
<p className="hidden peer-invalid:block text-xs text-red-500 my-1">
|
||||||
|
Please enter a time (minutes).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col flex-grow w-1/3">
|
||||||
|
<label htmlFor="cook-time" className="text-sm">
|
||||||
|
Cook Time
|
||||||
|
<span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<p className="text-xs pt-1 pb-2 text-gray-700">
|
||||||
|
Please provide the estimated cook time (minutes).
|
||||||
|
</p>
|
||||||
|
<input
|
||||||
|
onKeyDown={keyDownHandler}
|
||||||
|
className="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500
|
||||||
|
focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500"
|
||||||
|
type="number"
|
||||||
|
id="cook-time"
|
||||||
|
name="cook-time"
|
||||||
|
required
|
||||||
|
min="0"
|
||||||
|
max="120"
|
||||||
|
placeholder="e.g., 45"
|
||||||
|
/>
|
||||||
|
<p className="hidden peer-invalid:block text-xs text-red-500 my-1">
|
||||||
|
Please enter a time (minutes).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col flex-grow w-1/3">
|
||||||
|
<label htmlFor="serving-size" className="text-sm">
|
||||||
|
Serving Size
|
||||||
|
<span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<p className="text-xs pt-1 pb-2 text-gray-700">
|
||||||
|
Please provide the estimated serving size.
|
||||||
|
</p>
|
||||||
|
<input
|
||||||
|
onKeyDown={keyDownHandler}
|
||||||
|
className="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500
|
||||||
|
focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500"
|
||||||
|
type="number"
|
||||||
|
max="16"
|
||||||
|
min="1"
|
||||||
|
required
|
||||||
|
id="serving-size"
|
||||||
|
name="serving-size"
|
||||||
|
placeholder="e.g., 4"
|
||||||
|
/>
|
||||||
|
<p className="hidden peer-invalid:block text-xs text-red-500 my-1">
|
||||||
|
Please enter a serving size.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="my-4 flex gap-x-2">
|
||||||
|
<div className="flex flex-col flex-grow w-1/3">
|
||||||
|
<label htmlFor="category" className="text-sm">
|
||||||
|
Category
|
||||||
|
<span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<p className="text-xs pt-1 pb-2 text-gray-700">
|
||||||
|
Please provide the meal category.
|
||||||
|
</p>
|
||||||
|
<select
|
||||||
|
id="category"
|
||||||
|
name="category"
|
||||||
|
required
|
||||||
|
className="peer border border-gray-300 bg-gray-200 px-4 py-2 rounded-lg focus:outline-none
|
||||||
|
focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm
|
||||||
|
invalid:border-red-500"
|
||||||
|
>
|
||||||
|
<option value="">Select a category</option>
|
||||||
|
<option value="breakfast">Breakfast</option>
|
||||||
|
<option value="lunch">Lunch</option>
|
||||||
|
<option value="dinner">Dinner</option>
|
||||||
|
<option value="dessert">Dessert</option>
|
||||||
|
<option value="snack">Snack</option>
|
||||||
|
<option value="side">Side</option>
|
||||||
|
<option value="other">Other</option>
|
||||||
|
</select>
|
||||||
|
<p className="hidden peer-invalid:block text-xs text-red-500 my-1">
|
||||||
|
Please select a category.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col flex-grow w-1/3">
|
||||||
|
<label htmlFor="difficulty" className="text-sm">
|
||||||
|
Difficulty
|
||||||
|
<span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<p className="text-xs pt-1 pb-2 text-gray-700">
|
||||||
|
Please provide a baseline difficulty.
|
||||||
|
</p>
|
||||||
|
<select
|
||||||
|
id="difficulty"
|
||||||
|
name="difficulty"
|
||||||
|
required
|
||||||
|
className="peer border border-gray-300 bg-gray-200 px-4 py-2 rounded-lg focus:outline-none
|
||||||
|
focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm
|
||||||
|
invalid:border-red-500"
|
||||||
|
>
|
||||||
|
<option value="">Select a difficulty</option>
|
||||||
|
<option value="1">Beginner</option>
|
||||||
|
<option value="2">Easy</option>
|
||||||
|
<option value="3">Intermediate</option>
|
||||||
|
<option value="4">Challenging</option>
|
||||||
|
<option value="5">Extreme</option>
|
||||||
|
</select>
|
||||||
|
<p className="hidden peer-invalid:block text-xs text-red-500 my-1">
|
||||||
|
Please select a difficulty.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col my-4">
|
||||||
|
<label htmlFor="ingredients" className="text-sm">
|
||||||
|
Ingredients
|
||||||
|
<span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<p className="text-xs py-1 text-gray-700">Please provide a list of ingredients and their quantities.</p>
|
||||||
|
<ul id="ingredient-list">
|
||||||
|
<li className="w-full flex gap-x-2 py-2">
|
||||||
|
<div className="flex-grow">
|
||||||
|
<input
|
||||||
|
onKeyDown={keyDownHandler}
|
||||||
|
className="peer w-full border border-gray-300 px-4 py-2 rounded-lg focus:outline-none
|
||||||
|
focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm
|
||||||
|
invalid:border-red-500"
|
||||||
|
type="text"
|
||||||
|
id="ingredients"
|
||||||
|
name="ingredients"
|
||||||
|
required
|
||||||
|
minLength={1}
|
||||||
|
placeholder="Ingredient name (e.g., Chicken Breast)"
|
||||||
|
/>
|
||||||
|
<p className="hidden peer-invalid:block text-xs text-red-500 my-1">
|
||||||
|
Please enter at least one ingredient.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-1/3">
|
||||||
|
<input
|
||||||
|
onKeyDown={keyDownHandler}
|
||||||
|
className="peer w-full border border-gray-300 px-4 py-2 rounded-lg focus:outline-none
|
||||||
|
focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm
|
||||||
|
invalid:border-red-500"
|
||||||
|
type="text"
|
||||||
|
id="quantity"
|
||||||
|
name="quantity"
|
||||||
|
required
|
||||||
|
minLength={1}
|
||||||
|
placeholder="Quantity (e.g., 1lb)"
|
||||||
|
/>
|
||||||
|
<p className="hidden peer-invalid:block text-xs text-red-500 my-1">
|
||||||
|
Please provide a quantity.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="text-base md:text-lg text-white bg-blue-500 w-fit px-5 py-2 rounded-lg cursor-pointer"
|
||||||
|
>
|
||||||
|
Add Ingredient
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col my-4">
|
||||||
|
<label htmlFor="instructions" className="text-sm">
|
||||||
|
Instructions
|
||||||
|
<span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<p className="text-xs py-1 text-gray-700">
|
||||||
|
Please provide a list of instructions. You do not need to include step number, they will be added automatically!
|
||||||
|
</p>
|
||||||
|
<div id="instruction-list" className="flex flex-col">
|
||||||
|
<textarea
|
||||||
|
className="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500
|
||||||
|
focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm invalid:border-red-500
|
||||||
|
valid:my-2 invalid:mt-2"
|
||||||
|
id="instructions"
|
||||||
|
name="instructions"
|
||||||
|
rows={3}
|
||||||
|
required
|
||||||
|
minLength={1}
|
||||||
|
placeholder="Step 1: Describe this step..."
|
||||||
|
></textarea>
|
||||||
|
<p className="hidden peer-invalid:block text-xs text-red-500 my-1">
|
||||||
|
Please enter at least one step.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="text-base md:text-lg text-white bg-blue-500 w-fit px-5 py-2 rounded-lg cursor-pointer"
|
||||||
|
>
|
||||||
|
Add Instruction Step
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col my-4">
|
||||||
|
<label htmlFor="image" className="text-sm">
|
||||||
|
Recipe Image
|
||||||
|
</label>
|
||||||
|
<p className="text-xs pt-1 pb-2 text-gray-700">
|
||||||
|
Please provide an image of your creation. This is optional but is a nice touch!
|
||||||
|
</p>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
name="image"
|
||||||
|
id="image"
|
||||||
|
className="my-2 block w-full text-sm text-placeholder file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:bg-blue-100 file:text-blue-700 cursor-pointer"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p id="response" className="hidden"></p>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full mt-8 bg-gradient-to-r from-blue-200 to-purple-200 py-2 rounded-lg text-lg cursor-pointer shadow-md"
|
||||||
|
>
|
||||||
|
Create Recipe
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user