some kind of reactivity

README.md

@@ -0,0 +1,4 @@
+# Ситуация
+
+На свелте мне нравится что получается что-то, но пока не нравится что получается.
+Как будто бы надо будет сделать больбшой рефакторинг, но пока пускай будет хоть что-то.

vnshed/src/lib/components/create_button.svelte

@@ -1,4 +1,8 @@
 <!-- Кнопка "Создать" -->
+<script>
+    let { onclick } = $props();
+</script>
+
 <div class="create">
-    <button class="rounded" id="create">Создать</button>
+    <button class="rounded" id="create" {onclick}>Создать</button>
 </div>

vnshed/src/lib/components/horisontal_bar.svelte

@@ -31,15 +31,24 @@
 } -->
 
 <script>
+    import HorisontalItem from "./horisontal_item.svelte";
     import AddButton from "./add_button.svelte";
     import Image from "./image.svelte";
-    let { label = "", type = "text" } = $props();
+
+    let { value = $bindable([]), label = "", type = "text" } = $props();
+    let items = $state([]);
 </script>
 
 <div class="horisontal-bar {type == "text" ? "input" : ""} rounded">
     <p>{label}</p>
     {#if type == "text"}
-        <AddButton handler={() => {}} />
+        {#each items as item}
+            <HorisontalItem text={item}/>
+        {/each}
+        <AddButton handler={() => {
+            items.push("test");
+            value = items;
+        }} />
     {:else if type == "image"}
         <Image />
     {/if}

vnshed/src/lib/components/horisontal_item.svelte

@@ -0,0 +1,7 @@
+<script>
+    let { text } = $props();
+</script>
+
+<div class="horisontal-item rounded">
+    {text}
+</div>

vnshed/src/routes/+layout.svelte

@@ -7,6 +7,19 @@
     import QueueItem from '$lib/components/queue_item.svelte';
 
 	let { children } = $props();
+
+	let page_data = {
+		title: "",
+		description: "",
+		time_to_read: "",
+		genres: [],
+		tags: [],
+		badges: []
+	}
+
+	function send_json() {
+		console.log(JSON.stringify(page_data))
+	}
 </script>
 
 <svelte:head>
@@ -21,15 +34,15 @@
 
 <div class="fields rounded" id="fields">
 	<!-- Название -->
-	<input type="text" class="input rounded" placeholder="Название">
+	<input type="text" class="input rounded" placeholder="Название" bind:value={page_data["title"]}>
 
 	<!-- Описание -->
-	<textarea class="input rounded" placeholder="Описание" rows="4"></textarea>
+	<textarea class="input rounded" placeholder="Описание" rows="4" bind:value={page_data["description"]}></textarea>
 
 	<!-- Время на чтение -->
 	<div class="horisontal-bar">
 		<p>Время на чтение</p>
-		<select class="input rounded" id="hours-count">
+		<select class="input rounded" id="hours-count" bind:value={page_data["time_to_read"]}>
 			<option value="first">менее 2-х часов</option>
 			<option value="second">2-10 часов</option>
 			<option value="third">10-30 часов</option>
@@ -37,9 +50,9 @@
 		</select>
 	</div>
 
-	<HorisontalBar label="Жанры"/>
+	<HorisontalBar label="Жанры" bind:value={page_data["genres"]}/>
-	<HorisontalBar label="Теги"/>
+	<HorisontalBar label="Теги" bind:value={page_data["tags"]}/>
-	<HorisontalBar label="Баджи"/>
+	<HorisontalBar label="Баджи" bind:value={page_data["badges"]}/>
 
 	<p>Скриншоты</p>
 	<HorisontalBar type="image" />
@@ -57,7 +70,7 @@
 
 </div>
 
-<CreateButton />
+<CreateButton onclick={send_json}/>
 
 <style>
 	@import '$lib/css/global.css';