From 4afaf7f6f31048768eedcb303bd2352175d80180 Mon Sep 17 00:00:00 2001
From: AlexBocken <alexander@bocken.org>
Date: Thu, 22 Jun 2023 20:26:48 +0200
Subject: [PATCH] functioning Add recipe (not submitting) missing: season
 modals partly stylized add steps stylized

---
 src/lib/assets/icons/Check.svelte             |   3 +
 src/lib/assets/icons/Cross.svelte             |   4 +
 src/lib/assets/icons/Pen.svelte               |   3 +
 src/lib/assets/icons/Plus.svelte              |  33 ++
 src/lib/assets/icons/Upload.svelte            |   3 +
 src/lib/components/CardAdd.svelte             |  15 +-
 .../components/CreateIngredientList.svelte    | 151 +++++++++
 src/lib/components/CreateStepList.svelte      | 298 ++++++++++++++++++
 src/routes/rezepte/add/+page.svelte           |  63 +++-
 9 files changed, 555 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/assets/icons/Check.svelte
 create mode 100644 src/lib/assets/icons/Cross.svelte
 create mode 100644 src/lib/assets/icons/Pen.svelte
 create mode 100644 src/lib/assets/icons/Plus.svelte
 create mode 100644 src/lib/assets/icons/Upload.svelte
 create mode 100644 src/lib/components/CreateIngredientList.svelte
 create mode 100644 src/lib/components/CreateStepList.svelte

diff --git a/src/lib/assets/icons/Check.svelte b/src/lib/assets/icons/Check.svelte
new file mode 100644
index 0000000..8fde514
--- /dev/null
+++ b/src/lib/assets/icons/Check.svelte
@@ -0,0 +1,3 @@
+<script>
+</script>
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" {...$$restProps}><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
diff --git a/src/lib/assets/icons/Cross.svelte b/src/lib/assets/icons/Cross.svelte
new file mode 100644
index 0000000..f4dec21
--- /dev/null
+++ b/src/lib/assets/icons/Cross.svelte
@@ -0,0 +1,4 @@
+<script>
+</script>
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512" {...$$restProps} >
+<!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
diff --git a/src/lib/assets/icons/Pen.svelte b/src/lib/assets/icons/Pen.svelte
new file mode 100644
index 0000000..4f21de0
--- /dev/null
+++ b/src/lib/assets/icons/Pen.svelte
@@ -0,0 +1,3 @@
+<script>
+</script>
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" {...$$restProps} > <path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"/></svg>
diff --git a/src/lib/assets/icons/Plus.svelte b/src/lib/assets/icons/Plus.svelte
new file mode 100644
index 0000000..a5948c7
--- /dev/null
+++ b/src/lib/assets/icons/Plus.svelte
@@ -0,0 +1,33 @@
+<script>
+</script>
+<style>
+@keyframes shake{
+    0%{
+      transform: rotate(0)
+		scale(1,1);
+    }
+    25%{
+    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
+      	transform: rotate(30deg)
+      		scale(1.2,1.2)
+      ;
+    }
+    50%{
+
+    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
+      	transform: rotate(-30deg)
+      		scale(1.2,1.2);
+    }
+    74%{
+
+    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
+  	transform: rotate(30deg)
+  		scale(1.2, 1.2);
+	}
+	100%{
+      transform: rotate(0)
+      	scale(1,1);
+    }
+  }
+</style>
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" {...$$restProps}><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
diff --git a/src/lib/assets/icons/Upload.svelte b/src/lib/assets/icons/Upload.svelte
new file mode 100644
index 0000000..f3a0947
--- /dev/null
+++ b/src/lib/assets/icons/Upload.svelte
@@ -0,0 +1,3 @@
+<script>
+</script>
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" {...$$restProps}><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M288 109.3V352c0 17.7-14.3 32-32 32s-32-14.3-32-32V109.3l-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352H192c0 35.3 28.7 64 64 64s64-28.7 64-64H448c35.3 0 64 28.7 64 64v32c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V416c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>
diff --git a/src/lib/components/CardAdd.svelte b/src/lib/components/CardAdd.svelte
index 3278066..87d9239 100644
--- a/src/lib/components/CardAdd.svelte
+++ b/src/lib/components/CardAdd.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+
+import Cross from '$lib/assets/icons/Cross.svelte'
+
 export let tags:string[] = []
 let new_tag
 
@@ -208,9 +211,16 @@ input::placeholder{
 	padding-inline: 0.5em;
 	padding-block: 0.2em;
 }
+.card .name:hover{
+	color:var(--nord0);
+}
 .card .description{
 	padding-inline: 1em;
 	color: var(--nord4);
+	width: calc(300px - 2em); /*??*/
+}
+.card .description:hover{
+	color: var(--nord0);
 }
 .card .tags{
 	display: flex;
@@ -322,13 +332,15 @@ input::placeholder{
 
 
 <div class=card href="" >
+
 	<input class=icon placeholder=😀/>
 	{#if image_preview_url}
 		<img src={image_preview_url} class=img_preview width=300px height=300px />
 	{/if}
 	<div class=img_label_wrapper>
 		{#if image_preview_url}
-			<button class=delete on:click={remove_selected_images}><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">><path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>
+			<button class=delete on:click={remove_selected_images}>
+			<Cross fill=white style="width:2rem;height:2rem;"></Cross>
 </button>
 		{/if}
 
@@ -351,4 +363,5 @@ input::placeholder{
         	<div class="tag input_wrapper"><span class=input>+</span><input class="tag_input" type="text" on:keypress={add_on_enter} on:focusout={add_to_tags} size="1" bind:value={new_tag} placeholder=Stichwort...></div>
 		</div>
 	</div>
+
 </div>
diff --git a/src/lib/components/CreateIngredientList.svelte b/src/lib/components/CreateIngredientList.svelte
new file mode 100644
index 0000000..6b55fc3
--- /dev/null
+++ b/src/lib/components/CreateIngredientList.svelte
@@ -0,0 +1,151 @@
+<script lang='ts'>
+
+import Pen from '$lib/assets/icons/Pen.svelte'
+import Cross from '$lib/assets/icons/Cross.svelte'
+import Plus from '$lib/assets/icons/Plus.svelte'
+import Check from '$lib/assets/icons/Check.svelte'
+
+let ingredients_lists = [
+	{name: "",
+	ingredients: [],
+	}
+]
+
+let new_ingredient = {
+	amount: "",
+	unit: "",
+	name: "",
+	sublist: "",
+}
+
+let edit_ingredient = {
+	amount: "",
+	unit: "",
+	name: "",
+	list_index: "",
+	ingredient_index: "",
+}
+
+let edit_heading = {
+	name:"",
+	list_index: "",
+	}
+
+function get_sublist_index(sublist_name, list){
+	for(var i =0; i < list.length; i++){
+		if(list[i].name == sublist_name){
+			return i
+		}
+	}
+	return -1
+}
+export function show_modal_edit_subheading_ingredient(list_index){
+	edit_heading.name = ingredients_lists[list_index].name
+	edit_heading.list_index = list_index
+	const el = document.querySelector('#edit_subheading_ingredient_modal')
+	el.showModal()
+}
+export function edit_subheading_and_close_modal(){
+	ingredients_lists[edit_heading.list_index].name = edit_heading.name
+	const el = document.querySelector('#edit_subheading_ingredient_modal')
+	el.close()
+}
+
+export function add_new_ingredient(){
+	let list_index = get_sublist_index(new_ingredient.sublist, ingredients_lists)
+	if(list_index == -1){
+		ingredients_lists.push({
+			name: new_ingredient.sublist,
+			ingredients: [],
+		})
+		list_index = ingredients_lists.length - 1
+	}
+	ingredients_lists[list_index].ingredients.push({ ...new_ingredient})
+	ingredients_lists = ingredients_lists //tells svelte to update dom
+}
+export function remove_list(list_index){
+	ingredients_lists.splice(list_index, 1);
+	ingredients_lists = ingredients_lists //tells svelte to update dom
+}
+export function remove_ingredient(list_index, ingredient_index){
+	ingredients_lists[list_index].ingredients.splice(ingredient_index, 1)
+	ingredients_lists = ingredients_lists //tells svelte to update dom
+}
+
+export function show_modal_edit_ingredient(list_index, ingredient_index){
+	edit_ingredient = {...ingredients_lists[list_index].ingredients[ingredient_index]}
+	edit_ingredient.list_index = list_index
+	edit_ingredient.ingredient_index = ingredient_index
+	const modal_el = document.querySelector("#edit_ingredient_modal");
+	modal_el.showModal();
+}
+export function edit_ingredient_and_close_modal(){
+	ingredients_lists[edit_ingredient.list_index].ingredients[edit_ingredient.ingredient_index] = {
+	amount: edit_ingredient.amount,
+	unit: edit_ingredient.unit,
+	name: edit_ingredient.name,
+	}
+	const modal_el = document.querySelector("#edit_ingredient_modal");
+	modal_el.close();
+}
+
+</script>
+
+<style>
+</style>
+
+
+{#each ingredients_lists as list, list_index}
+	<h3>
+	{#if list.name}
+		{list.name}
+	{:else}
+		Leer
+	{/if}
+	<button class=edit on:click="{() => show_modal_edit_subheading_ingredient(list_index)}">
+			<Pen></Pen>	</button>
+		<button class=remove on:click="{() => remove_list(list_index)}">
+				<Cross></Cross>
+		</button>
+	</h3>
+	<ul>
+	{#each list.ingredients as ingredient, ingredient_index}
+		<li>{ingredient.amount} {ingredient.unit} {ingredient.name}
+		<button class=edit on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)}>
+		<Pen></Pen>
+		</button>
+		<button class=remove on:click="{() => remove_ingredient(list_index, ingredient_index)}">
+			<Cross></Cross>
+		</button>
+	</li>
+	{/each}
+	</ul>
+{/each}
+
+<input type="text" bind:value={new_ingredient.sublist} placeholder="Unterkategorie (optional)">
+<div class=ingredient>
+	<input type="text" id=amount placeholder="250..." bind:value={new_ingredient.amount}>
+	<input type="text" id=unit placeholder="mL..." bind:value={new_ingredient.unit}>
+	<input type="text" id=name placeholder="Milch..." bind:value={new_ingredient.name}>
+	<button on:click={() => add_new_ingredient()}>
+		<Plus></Plus>
+	</button>
+
+</div>
+
+<dialog class=ingredient id=edit_ingredient_modal>
+	<input type="text" id=amount placeholder="250..." bind:value={edit_ingredient.amount}>
+	<input type="text" id=unit placeholder="mL..." bind:value={edit_ingredient.unit}>
+	<input type="text" id=name placeholder="Milch..." bind:value={edit_ingredient.name}>
+	<button on:click={edit_ingredient_and_close_modal}>
+	<Check></Check>
+		</button>
+
+</dialog>
+
+<dialog id=edit_subheading_ingredient_modal>
+	<input type="text" bind:value={edit_heading.name}>
+	<button on:click={edit_subheading_and_close_modal}>
+	<Check></Check>
+	</button>
+</dialog>
diff --git a/src/lib/components/CreateStepList.svelte b/src/lib/components/CreateStepList.svelte
new file mode 100644
index 0000000..1972556
--- /dev/null
+++ b/src/lib/components/CreateStepList.svelte
@@ -0,0 +1,298 @@
+<script lang='ts'>
+
+import Pen from '$lib/assets/icons/Pen.svelte'
+import Cross from '$lib/assets/icons/Cross.svelte'
+import Plus from '$lib/assets/icons/Plus.svelte'
+import Check from '$lib/assets/icons/Check.svelte'
+
+import '$lib/components/nordtheme.css'
+
+const step_placeholder = "Kartoffeln schälen..."
+let instructions = [{
+	name: "",
+	steps: [],
+}]
+
+let new_step = {
+	name: "",
+	step: "Kartoffeln schälen..."
+	}
+
+let edit_heading = {
+	name:"",
+	list_index: "",
+	}
+
+function get_sublist_index(sublist_name, list){
+	for(var i =0; i < list.length; i++){
+		if(list[i].name == sublist_name){
+			return i
+		}
+	}
+	return -1
+}
+export function remove_list(list_index){
+	instructions.splice(list_index, 1);
+	instructions = instructions //tells svelte to update dom
+}
+
+export function add_new_step(){
+	let list_index = get_sublist_index(new_step.name, instructions)
+	if(list_index == -1){
+		instructions.push({
+			name: new_step.name,
+			steps: [ new_step.step ],
+		})
+		list_index = instructions.length - 1
+	}
+	else{
+		instructions[list_index].steps.push(new_step.step)
+	}
+	const el = document.querySelector("#step")
+	el.innerHTML = step_placeholder
+	instructions = instructions //tells svelte to update dom
+
+	new_step.step = ""
+	add_placeholder()
+}
+
+export function remove_step(list_index, step_index){
+	instructions[list_index].steps.splice(step_index, 1)
+	instructions = instructions //tells svelte to update dom
+}
+
+let edit_step = {
+	name: "",
+	step: "",
+	list_index: 0,
+	step_index: 0,
+}
+export function show_modal_edit_step(list_index, step_index){
+	edit_step = {
+		step: instructions[list_index].steps[step_index],
+		name: instructions[list_index].name,
+	}
+	edit_step.list_index = list_index
+	edit_step.step_index = step_index
+	const modal_el = document.querySelector("#edit_step_modal");
+	modal_el.showModal();
+}
+
+export function edit_step_and_close_modal(){
+	instructions[edit_step.list_index].steps[edit_step.step_index] = edit_step.step
+	const modal_el = document.querySelector("#edit_step_modal");
+	modal_el.close();
+}
+
+export function show_modal_edit_subheading_step(list_index){
+	edit_heading.name = instructions[list_index].name
+	edit_heading.list_index = list_index
+	const el = document.querySelector('#edit_subheading_steps_modal')
+	el.showModal()
+}
+
+export function edit_subheading_steps_and_close_modal(){
+	instructions[edit_heading.list_index].name = edit_heading.name
+	const modal_el = document.querySelector("#edit_subheading_steps_modal");
+	modal_el.close();
+}
+
+
+export function clear_step(){
+	const el = document.querySelector("#step")
+	if(el.innerHTML == step_placeholder){
+		el.innerHTML = ""
+	}
+}
+export function add_placeholder(){
+	const el = document.querySelector("#step")
+	if(el.innerHTML == ""){
+		el.innerHTML = "Kartoffeln schälen..."
+	}
+}
+</script>
+
+<style>
+input::placeholder{
+	all:unset;
+}
+
+.adder{
+	margin-inline: auto;
+	position: relative;
+	margin-block: 3rem;
+	width: 50ch;
+	border-radius: 20px;
+	transition: 200ms;
+}
+.shadow{
+	box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
+}
+.adder button{
+	all:unset;
+	position: absolute;
+	right: -1.5rem;
+	bottom: -1.5rem;
+	cursor: pointer;
+	display:flex;
+	justify-content: center;
+	align-items: center;
+	background-color: var(--red);
+	border-radius:100000px;
+	padding: 1rem;
+	transition: 100ms;
+	box-shadow: 0 0 1em 0.4em rgba(0,0,0,0.3);
+}
+.adder button:hover{
+	background-color: var(--nord0);
+	transform: scale(1.1,1.1);
+	box-shadow: 0 0 1em 0.8em rgba(0,0,0,0.3);
+}
+.category{
+	all: unset;
+	position: absolute;
+	--font_size: 1.5rem;
+	top: -1em;
+	left: -1em;
+	font-family: sans-serif;
+	font-size: 1.5rem;
+	background-color: var(--nord0);
+	color: var(--nord4);
+	border-radius: 1000000px;
+	width: 23ch;
+	padding: 0.5em 1em;
+	transition: 100ms;
+	box-shadow: 0.5em 0.5em 1em 0.4em rgba(0,0,0,0.3);
+}
+.category:hover{
+	background-color: var(--nord1);
+	transform: scale(1.05,1.05);
+}
+.adder:hover{
+	transform: scale(1.1, 1.1);
+}
+
+.add_step p{
+	font-family: sans-serif;
+	width: 100%;
+	font-size: 1.2rem;
+	padding: 2rem;
+	padding-top: 2.5rem;
+	border-radius: 20px;
+	background-color: var(--blue);
+	color: #bbb;
+	transition: 200ms;
+}
+.add_step p:hover,
+.add_step p:focus-visible
+{
+	color: white;
+}
+
+dialog{
+	box-sizing: content-box;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.6);
+	border: unset;
+	margin: 0;
+}
+dialog .adder{
+	margin-top: 5rem;
+}
+dialog h2{
+	font-size: 3rem;
+	font-family: sans-serif;
+	color: white;
+	text-align: center;
+	margin-top: 30%;
+}
+
+@keyframes shake{
+    0%{
+      transform: rotate(0)
+		scale(1,1);
+    }
+    25%{
+    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
+      	transform: rotate(30deg)
+      		scale(1.2,1.2)
+      ;
+    }
+    50%{
+
+    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
+      	transform: rotate(-30deg)
+      		scale(1.2,1.2);
+    }
+    74%{
+
+    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
+  	transform: rotate(30deg)
+  		scale(1.2, 1.2);
+	}
+	100%{
+      transform: rotate(0)
+      	scale(1,1);
+    }
+  }
+</style>
+
+
+
+{#each instructions as list, list_index}
+	<h3>
+	{#if list.name}
+		{list.name}
+	{:else}
+		Leer
+	{/if}
+	<button class=edit on:click="{() => show_modal_edit_subheading_step(list_index)}">
+			<Pen></Pen>	</button>
+		<button class=remove on:click="{() => remove_list(list_index)}">
+				<Cross></Cross>
+		</button>
+	</h3>
+	<ol>
+	{#each list.steps as step, step_index}
+		<li>{step}
+			<button class=edit on:click={() => show_modal_edit_step(list_index, step_index)}>
+				<Pen></Pen>
+		</button>
+		<button class=remove on:click="{() => remove_step(list_index, step_index)}">
+			<Cross></Cross>
+		</button>
+
+		</li>
+	{/each}
+	</ol>
+{/each}
+
+<div class='adder shadow'>
+<input class=category type="text" bind:value={new_step.name} placeholder="Unterkategorie (optional)">
+<div class=add_step>
+	<p id=step contenteditable on:focus='{clear_step}' on:blur={add_placeholder} bind:innerHTML={new_step.step}></p>
+	<button on:click={() => add_new_step()}>
+		<Plus fill=white style="height: 2rem; width: 2rem"></Plus>
+	</button>
+
+</div>
+</div>
+<dialog id=edit_step_modal>
+	<h2>Schritt verändern</h2>
+	<div class=adder>
+	<input class=category type="text" bind:value={edit_step.name} placeholder="Unterkategorie (optional)">
+	<div class=add_step>
+		<p id=step contenteditable bind:innerHTML={edit_step.step}></p>
+	<button on:click="{() => edit_step_and_close_modal()}" >
+		<Check fill=white style="height: 2rem; width: 2rem"></Check>
+	</button>
+</div>
+</dialog>
+
+<dialog id=edit_subheading_steps_modal>
+	<input type="text" bind:value={edit_heading.name}>
+	<button on:click={edit_subheading_steps_and_close_modal}>
+	<Check></Check>
+	</button>
+</dialog>
diff --git a/src/routes/rezepte/add/+page.svelte b/src/routes/rezepte/add/+page.svelte
index fdc536d..4c09ffd 100644
--- a/src/routes/rezepte/add/+page.svelte
+++ b/src/routes/rezepte/add/+page.svelte
@@ -13,6 +13,8 @@
     	import MediaScroller from '$lib/components/MediaScroller.svelte';
     	import Card from '$lib/components/Card.svelte';
     	import Search from '$lib/components/Search.svelte';
+	import CreateIngredientList from '$lib/components/CreateIngredientList.svelte';
+	import CreateStepList from '$lib/components/CreateStepList.svelte';
     	export let data: PageData;
     	export let current_month = new Date().getMonth() + 1
 	async function doPost () {
@@ -43,6 +45,7 @@
 		console.log(result)
 	}
 
+
 </script>
 
 <style>
@@ -55,6 +58,47 @@ input{
 	background-color: var(--nord4);
 
 }
+.ingredient{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-wrap: wrap;
+}
+.ingredient > input{
+	display: inline;
+	margin-inline: 0.25em;
+}
+.ingredient>#unit{
+	max-width: 40px;
+}
+.ingredient>#amount{
+	max-width: 100px;
+}
+.ingredient button{
+	all: unset;
+	background-color: var(--red);
+	padding: 0.3em;
+	height: 100%;
+	border-radius: 1000px;
+	display:flex;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+	transition: 100ms;
+}
+.ingredient button svg{
+	fill: white;
+	width: 1.5rem;
+	height: 1.5rem;
+}
+.ingredient button:hover{
+	background-color: var(--orange);
+	transform: scale(1.1, 1.1);
+}
+.ingredient button:hover svg{
+	transform: scale(1.1, 1.1);
+}
+
 </style>
 <h1>Rezept hinzufügen</h1>
 
@@ -62,21 +106,6 @@ input{
 
 <input bind:value={short_name} placeholder="Kurzname"/>
 <h2>Zutaten</h2>
-<input>
+<CreateIngredientList></CreateIngredientList>
 <h2>Zubereitung</h2>
-<button on:click={doPost}>HIT IT</button>
-<button on:click={console.log(tags)}>TAGS</button>
-<h3>Zutaten</h3>
-
-<!-- already added ingredients
-<input type="number"><select name="" id=""></select><input type="text">
-
-<br>
-<br>
-<input type="text" name="" id=""><button>Neue Unterkategorie hinzufügen</button>
-
-<h3> Schritte </h3>
-<input type="text">
-<button>Neue Unterkategorie hinzufügen</button>
-<br>
-<input type="text"><button>Schritt hinzufügen</button>-->
+<CreateStepList></CreateStepList>