CRUD* Lecture

src/components/Form/Select.svelte

@@ -2,13 +2,14 @@
   export let label;
   export let value;
   export let options = [];
+  export let valueKey = "id";
 </script>
 
 <label class="block">
   {#if label} <span class="text-gray-700">{label}</span> {/if}
   <select bind:value class="form-select block w-full mt-1">
     {#each options as option}
-      <option value={option.id}>
+      <option value={option[valueKey]}>
         {option.text}
       </option>
     {/each}

src/components/Form/TextField.svelte

@@ -4,6 +4,7 @@
   export let value;
   export let onKeyDown;
   export let className = "";
+  export let autofocus = false;
 </script>
 
 <label class="block {className}">
@@ -14,5 +15,6 @@
     on:keydown={onKeyDown}
     {placeholder}
     bind:value
+    autofocus
   />
 </label>