(FEAT): Create page translate, but still not functionality.
This one will be very difficult to translate.
This commit is contained in:
Hayden Hargreaves
parent
c9be9876e3
commit
5db803d033
@ -1,8 +1,333 @@
|
||||
import Banner from "../components/Banner";
|
||||
|
||||
export default function Create() {
|
||||
const keyDownHandler = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
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