1 files changed, 45 insertions, 0 deletions

diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/PreferencesForm.svelte
new file mode 100644
index 0000000..781866c
--- /dev/null
+++ b/fe/src/lib/PreferencesForm.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+import { preferences } from '../stores/auth';
+import type { Size, Preference } from '../types';
+   export let open: boolean = true; 
+
+    let preference: Preference = {
+        color: "#00FF00",
+        size: {
+            size: 8,
+            unit: 'oz'
+        }
+    }
+    
+    preferences.subscribe((value) => {
+        preference = value;
+    });
+
+    function onPreferencesSave(): void {
+        preferences.set(preferences);
+    }
+</script>
+<dialog {open}>
+    <h2>User Preferences</h2>
+    <form method="dialog">
+        <div class="form input group">
+            <label>Color</label>
+            <input type="color" bind:value={preference.color}/>
+        </div>
+        <div class="form input group">
+            <label>Bottle Size</label>
+            <select bind:value={preference.size.size}>
+                {#each [8,16,24,32,40,48] as size}
+                    <option>{ size }</option>
+                {/each}
+            </select>
+        </div>
+        <button type="submit">Save</button>
+    </form>
+</dialog>
+<style>
+dialog {
+    background: white;
+    color: black;
+}
+</style>