From f54e95c2547916468bcaa7b842da10fd3b9c4b81 Mon Sep 17 00:00:00 2001
From: Dmitry Borisenko <49808844+DmitryBorisenko33@users.noreply.github.com>
Date: Sun, 26 Dec 2021 23:29:59 +0100
Subject: [PATCH] modal

---
 src/App.svelte      |  6 +++++-
 src/Content.svelte  | 13 +++++++++++++
 src/Surprise.svelte |  8 ++++++++
 3 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/Content.svelte
 create mode 100644 src/Surprise.svelte

diff --git a/src/App.svelte b/src/App.svelte
index 74495d8..ce27c81 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -10,7 +10,8 @@
   import Toggle from "./widgets/Toggle.svelte";
   import Anydata from "./widgets/Anydata.svelte";
 
-  //import Modal from "svelte-simple-modal";
+  import Content from "./Content.svelte";
+  import Modal from "svelte-simple-modal";
 
   import Chart from "svelte-frappe-charts";
 
@@ -705,6 +706,9 @@
       <Route path="/about">
         <Card title={"Пример графика"}>
           <Chart data={datachart} type="line" />
+          <Modal>
+            <Content />
+          </Modal>
         </Card>
       </Route>
     </div>
diff --git a/src/Content.svelte b/src/Content.svelte
new file mode 100644
index 0000000..4f729c7
--- /dev/null
+++ b/src/Content.svelte
@@ -0,0 +1,13 @@
+<!-- Content.svelte -->
+<script>
+  import { getContext } from "svelte";
+  import Surprise from "./Surprise.svelte";
+
+  const { open } = getContext("simple-modal");
+
+  const showSurprise = () => {
+    open(Surprise, { message: "It's a modal!" });
+  };
+</script>
+
+<p><button on:click={showSurprise}>Show me a surprise!</button></p>
diff --git a/src/Surprise.svelte b/src/Surprise.svelte
new file mode 100644
index 0000000..bf7ca89
--- /dev/null
+++ b/src/Surprise.svelte
@@ -0,0 +1,8 @@
+<!-- Surprise.svelte -->
+<script>
+  export let message;
+</script>
+
+<p>
+  🎉 {message} 🍾
+</p>