userInput Bind

Author: saaqi

src/components/Counter.svelte renamed to src/lib/components/Counter.svelte

@@ -0,0 +1,17 @@
+<script>
+	let {
+		title = '',
+		placeholder = 'Enter your text here...',
+	} = $props();
+</script>
+
+<div class="mb-3">
+	<label for="exampleFormControlTextarea1" class="form-label">{title}</label>
+	<textarea
+		bind:value={title}
+		class="form-control"
+		id="exampleFormControlTextarea1"
+		{placeholder}
+		rows="3"
+	></textarea>
+</div>

src/lib/components/Input.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { page } from '$app/state';
-	import { emojis } from '../components/emojis.js';
+	import { emojis } from '$lib/components/emojis.js';
 </script>
 
 <svelte:head>

src/components/Logos.svelte renamed to src/lib/components/Logos.svelte

@@ -1,7 +1,8 @@
 <script>
-	import Counter from '/src/components/Counter.svelte';
-	import Logos from '/src/components/Logos.svelte';
-	import Modal from '/src/components/Modal.svelte';
+	import Counter from '$lib/components/Counter.svelte';
+	import Logos from '$lib/components/Logos.svelte';
+	import Modal from '$lib/components/Modal.svelte';
+	import Input from '$lib/components/Input.svelte';
 	import { onMount } from 'svelte';
 
 	let hrefLocation = '';
@@ -38,7 +39,7 @@
 					/>
 				</div>
 
-				<div>
+				<div class="mb-3">
 					<a
 						href="https://pagespeed.web.dev/report?url={hrefLocation}"
 						target="_blank"
@@ -48,8 +49,10 @@
 						Google PageSpeed Report
 					</a>
 				</div>
+				<Input />
 			</div>
 
+
 			<p>
 				Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation
 			</p>