From 2198dd18c7c32652f7d7a5d6526fdd11369a6d61 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Tue, 27 Jul 2021 17:29:37 -0700
Subject: [PATCH] Create basic Modal component that opens and closes on top of
 content using the Portal.

---
 src/lib/Modal.svelte    | 40 ++++++++++++++++++++++++++++++++++++++++
 src/routes/index.svelte | 18 ++++++++++--------
 2 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/Modal.svelte

diff --git a/src/lib/Modal.svelte b/src/lib/Modal.svelte
new file mode 100644
index 0000000..a5f5631
--- /dev/null
+++ b/src/lib/Modal.svelte
@@ -0,0 +1,40 @@
+<script>
+	import { fly, fade } from 'svelte/transition';
+	import Portal from './Portal.svelte';
+
+	export let isModalOpen = false;
+
+	function closeModal() {
+		isModalOpen = false;
+	}
+</script>
+
+{#if isModalOpen}
+	<Portal>
+		<div class="modal-wrapper" transition:fly={{ opacity: 0, y: 100 }}>
+			<button on:click={closeModal} aria-label="Close Modal Box">Close</button>
+			<slot />
+		</div>
+		<div on:click={closeModal} transition:fade class="background" />
+	</Portal>
+{/if}
+
+<style>
+	.modal-wrapper {
+		position: fixed;
+		inset: 100px 0 0;
+		min-width: 320px;
+		max-width: 530px;
+		margin: 0 auto;
+		width: 100%;
+		z-index: 101;
+	}
+	.background {
+		background: black;
+		opacity: 0.8;
+		cursor: pointer;
+		inset: 0;
+		position: fixed;
+		z-index: 100;
+	}
+</style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 1f2f066..9f1e8ea 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -2,12 +2,14 @@
 	import SearchFilter from '$lib/SearchFilter.svelte';
 	import Field from '$lib/Field.svelte';
 	import Markdown from '$lib/Markdown.svelte';
+	import Modal from '$lib/Modal.svelte';
 	import Portal from '$lib/Portal.svelte';
 	// import BetterAccordion from '$lib/BetterAccordion.svelte';
 	// import Toggle from '$lib/Toggle.svelte';
 	let isToggled = false;
-
+	let isModalOpen = false;
 	let text = '';
+
 	$: console.log(text);
 	let search = '';
 	let items = ['scott', 'wes', 'landon', 'courtney', 'lucie', 'brooklyn', 'Samson'];
@@ -15,13 +17,13 @@
 
 <h1>Welcome to Level Up UI {search}</h1>
 
-<Portal>
-	<Markdown bind:text />
-</Portal>
-
-<Field bind:value={search} label="Search" insrustions="Type to search" placeholder="Joe" />
-
-<Field value={0} label="Number" type="number" />
+<Modal {isModalOpen}>
+	<div style="background: white; box-shadow: 1px 1px 4px rgba(0,0,0,0.3);">
+		<Field bind:value={search} label="Search" insrustions="Type to search" placeholder="Joe" />
+		<Field value={0} label="Number" type="number" />
+	</div>
+</Modal>
+<button on:click={() => (isModalOpen = true)}>Open Modal Form</button>
 
 <SearchFilter {items} bind:search />