Add mode functionality + create form component

src/components/Form/Checkbox.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let label;
+  export let value;
+  export let checked;
+  export let name;
+</script>
+
+<label class="inline-flex items-center">
+  <input
+    type="checkbox"
+    class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50"
+    {name}
+    {value}
+    bind:checked
+  />
+  <span class="ml-2">{label}</span>
+</label>

src/components/Form/Date.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let label;
+  export let placeholder;
+  export let value;
+</script>
+
+<label class="block">
+  <span class="text-gray-700">{label}</span>
+  <input
+    bind:value
+    {placeholder}
+    type="date"
+    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+  />
+</label>

src/components/Form/RadioItem.svelte

@@ -0,0 +1,11 @@
+<script>
+  export let label;
+  export let value;
+  export let checked;
+  export let name;
+</script>
+
+<label class="inline-flex items-center">
+  <input class="form-radio" type="radio" {checked} {name} {value} />
+  <span class="ml-2">{label}</span>
+</label>

src/components/Form/Select.svelte

@@ -0,0 +1,19 @@
+<script>
+  export let label;
+  export let placeholder;
+  export let value;
+  export let options = [];
+
+  let answer = "Work on ";
+</script>
+
+<label class="block">
+  <span class="text-gray-700">{label}</span>
+  <select bind:value class="form-select block w-full mt-1">
+    {#each options as option}
+      <option value={option.id}>
+        {option.text}
+      </option>
+    {/each}
+  </select>
+</label>

src/components/Form/TextArea.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let label;
+  export let placeholder;
+  export let value;
+</script>
+
+<label class="block">
+  <span class="text-gray-700">{label}</span>
+  <textarea
+    class="form-textarea mt-1 block w-full h-24"
+    rows="3"
+    {placeholder}
+    bind:value
+  />
+</label>

src/components/Form/TextField.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let label;
+  export let placeholder;
+  export let value;
+</script>
+
+<label class="block">
+  <span class="text-gray-700">{label}</span>
+  <input
+    class="form-input mt-1 block w-full"
+    type="text"
+    {placeholder}
+    bind:value
+  />
+</label>