extended appointment info modul

src/lib/modules/AppointmentConfirmDialog.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import AppointmentInfo from "./AppointmentInfo.svelte";
+
+  export let active: boolean;
+
+  let title: string = "Title";
+  let location: string = "Somewhere";
+  let description: string = "Description ...";
+  let date: Date = new Date();
+  let time: string = "18:00";
+
+  function closeModal() {
+    active = false;
+  }
+</script>
+
+<dialog class="max {active ? 'active': ''}">
+    <div class="center middle medium-padding">
+      <AppointmentInfo bind:title bind:location bind:description
+          bind:time bind:date isConfirmation={true} />
+
+      <nav class="right-align">
+        <button class="border" on:click={closeModal}>Cancel</button>
+        <button>Confirm</button>
+      </nav>
+  </div>
+</dialog>
+  

src/lib/modules/AppointmentInfo.svelte

@@ -2,6 +2,9 @@
     export let title: string = "";
     export let location: string = "";
     export let description: string = "";
+    export let isConfirmation: boolean = false;
+    export let date: Date = new Date();
+    export let time: string = "";
 </script>
 
 
@@ -9,4 +12,8 @@
     <h5>{title}</h5>
     <p><i>pin_drop</i> {location}</p>
     <p><i>description</i> {description}</p>
+    {#if isConfirmation}
+        <p><i>event</i> {date}</p>
+        <p><i>schedule</i> {time}</p>
+    {/if}
 </article>  

src/lib/modules/AppontmentConfirmDialog.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-
-
-</script>
-
-<dialog class="max">
-    <h5>Fullscreen</h5>
-    <div>Some text here</div>
-    <nav class="right-align">
-      <button class="border">Cancel</button>
-      <button>Confirm</button>
-    </nav>
-  </dialog>
-  

src/routes/appointment/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { AppointmentDateTimes } from '$lib/dbdata';
+	import AppointmentConfirmDialog from '$lib/modules/AppointmentConfirmDialog.svelte';
     import AppointmentInfo from '$lib/modules/AppointmentInfo.svelte';
     import DatePicker from '$lib/modules/DatePicker.svelte';
 	import DateTimes from '$lib/modules/DateTimes.svelte';
@@ -45,3 +46,4 @@
     <DateTimes bind:availableTimes={appointmentDateTimes} />
 </div>
 
+<AppointmentConfirmDialog active={true} />