From 015172df86335d211db2a68b48058a0c101ddbc9 Mon Sep 17 00:00:00 2001
From: Borja Robert <borja@brobert.net>
Date: Sun, 25 Sep 2022 13:45:26 +0200
Subject: [PATCH] =?UTF-8?q?a=C3=B1ado=20los=20rudimentos=20de=20form,=20de?=
 =?UTF-8?q?=20preview=20y=20las=20vinculo=20con=20una=20store?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.css                    |  5 +++++
 src/lib/form/Form.svelte       | 34 ++++++++++++++++++++++++++++++++++
 src/lib/preview/Preview.svelte |  7 +++++++
 src/lib/stores/store.js        |  3 +++
 src/routes/+layout.svelte      | 16 ----------------
 src/routes/+page.svelte        | 10 ++++++----
 6 files changed, 55 insertions(+), 20 deletions(-)
 create mode 100644 src/lib/form/Form.svelte
 create mode 100644 src/lib/preview/Preview.svelte
 create mode 100644 src/lib/stores/store.js

diff --git a/src/app.css b/src/app.css
index 77bf6af..a8cfce1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,4 +1,9 @@
 @import '@fontsource/fira-mono';
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
 
 :root {
 	font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
diff --git a/src/lib/form/Form.svelte b/src/lib/form/Form.svelte
new file mode 100644
index 0000000..8420a66
--- /dev/null
+++ b/src/lib/form/Form.svelte
@@ -0,0 +1,34 @@
+<script>
+    import {title} from '$lib/stores/store'
+
+    const handleSubmit = async () => {
+	console.log("submit");	
+    }
+</script>
+
+<form on:submit|preventDefault={handleSubmit}>
+    <label for="title">Título</label>
+    <input bind:value={$title} type="text" name="title" placeholder="Título">
+</form>
+
+<style>
+
+    form {
+	margin: 1rem;
+	display: block;
+    }
+
+    input {
+	display: block;
+	width: 100%;
+	font-size: 1rem;
+	font-family: monospace;
+	padding: 0.5rem;
+    }
+
+    label {
+	display: block;
+	font-size: 1.5rem;
+	margin: 0.5rem 0;
+    }
+</style>
diff --git a/src/lib/preview/Preview.svelte b/src/lib/preview/Preview.svelte
new file mode 100644
index 0000000..b16e88c
--- /dev/null
+++ b/src/lib/preview/Preview.svelte
@@ -0,0 +1,7 @@
+<script>
+ import {title} from '$lib/stores/store'
+</script>
+
+<div class="preview">
+    {$title}
+</div>
diff --git a/src/lib/stores/store.js b/src/lib/stores/store.js
new file mode 100644
index 0000000..3bea4a9
--- /dev/null
+++ b/src/lib/stores/store.js
@@ -0,0 +1,3 @@
+import {writable} from 'svelte/store'
+
+export const title = writable("");
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ea26203..37e0f42 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -8,10 +8,6 @@
     <slot />
 </main>
 
-<footer>
-    <p><a href="https://dereechoamorir.org">derechoamorir.org</a></p>
-</footer>
-
 <style>
     main {
 	width: 100%;
@@ -20,18 +16,6 @@
 	box-sizing: border-box;
     }
 
-    footer {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	padding: 40px;
-    }
-
-    footer a {
-	font-weight: bold;
-    }
-
     @media (min-width: 480px) {
 	footer {
 	    padding: 40px 0;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1440332..22f1e65 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+    import Form from '$lib/form/Form.svelte'
+    import Preview from '$lib/preview/Preview.svelte'
     import Header from '$lib/header/Header.svelte'
 </script>
 
@@ -8,16 +10,16 @@
 </svelte:head>
 
 <div class="main">
-    <section class="form"> <!-- Form component  --></section>
-    <section class="preview"> <!-- Preview component --></section>
+    <section class="form"><Form /></section>
+    <section class="preview"><Preview /></section>
 </div>
 
 <style>
     .main {
 	display: grid;
-	grid-template-columns: 1fr 1fr;
+	grid-template-columns: 2fr 3fr;
 	grid-gap: 0.5rem;
-	min-height: calc(100vh - 4rem);
+	min-height: calc(100vh - 5rem);
     }
     .form {
 	grid-column: 1/2;