Modal currently unused, example file next to it

src/lib/components/Modal.svelte

@@ -0,0 +1,33 @@
+<script>
+	export let showModal = false;
+	export let isPromo = false;
+</script>
+
+{#if showModal}
+	<div class="backdrop" class:promo={isPromo} on:click|self>
+		<div class="modal">
+			<slot />
+		</div>
+	</div>
+{/if}
+
+<style>
+	.backdrop {
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		background: rgba(0, 0, 0, 0.8);
+	}
+	.modal {
+		padding: 10px;
+		border-radius: 10px;
+		max-width: 400px;
+		margin: 10% auto;
+		text-align: center;
+		background: #3f3f3f;
+	}
+	.promo .modal {
+		background: crimson;
+		color: white;
+	}
+</style>

src/lib/components/ModalExample.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import Modal from "$lib/components/Modal.svelte";
+
+  export let showSettings: boolean;
+
+  const toggleSettings = () => {
+    showSettings = !showSettings;
+  }
+
+  const handleSubmit = () => {
+    console.log("submitted ", gameGroupSettings);
+  }
+
+  let gameGroupSettings: [] = [];
+
+</script>
+
+<Modal showModal={showSettings} on:click={toggleSettings}>
+  <h3>Settings</h3>
+  <div class="settings-modal">
+    
+    <form on:submit|preventDefault={handleSubmit}>
+      <b>Show Game Groups:</b><br>
+      <input type="checkbox" bind:group={gameGroupSettings} value="a">Group A<br>
+      <input type="checkbox" bind:group={gameGroupSettings} value="b">Group B<br>
+      <input type="checkbox" bind:group={gameGroupSettings} value="-">Ungrouped<br>
+      
+      <div class="settings-modal-save">
+        <button>Save</button>
+      </div>
+    </form>
+  </div>
+
+  
+</Modal>
+
+<style>
+  .settings-modal {
+    text-align: left;
+  }
+
+  .settings-modal input {
+    margin-left: 1rem;
+  }
+
+  .settings-modal-save {
+    text-align: center;
+  }
+</style>