board member - working

frontend/admin/src/routes/board-list/+page.svelte

@@ -2,6 +2,7 @@
     import { onMount, onDestroy, beforeUpdate, afterUpdate } from "svelte";
     import { invalidateAll } from "$app/navigation";
     import { page } from "$app/stores";
+    import BoardMember from "./board-member.svelte";
 
     import "$lib/styles/table.css";
 
@@ -233,6 +234,17 @@
         invalidateAll();
     }
 
+    let boardMember;
+    let dialogTitle;
+    let dialogMessage;
+    function openBoardMemberDialog() {
+        dialogTitle = "Board member";
+        dialogMessage = "Hello!!";
+
+        boardMember.showModal();
+        boardMember.title = "hahaha";
+    }
+
     onMount(() => {});
 
     afterUpdate(() => {
@@ -245,6 +257,12 @@
     });
 </script>
 
+<BoardMember
+    bind:BoardMember={boardMember}
+    title={dialogTitle}
+    message={dialogMessage}
+/>
+
 <h1>Boards</h1>
 
 <button
@@ -284,6 +302,10 @@
     {/each}
 </select>
 
+<dialog>
+    <h2>Hello dialog!!</h2>
+</dialog>
+
 <table id="boards-list-container">
     <thead>
         <tr>
@@ -438,6 +460,14 @@
                     {/each}
 
                     <td>
+                        <!-- <button
+                            type="button"
+                            on:click={() => {
+                                openBoardMemberDialog();
+                            }}
+                        >
+                            Members
+                        </button> -->
                         <button
                             type="button"
                             on:click={() => {

frontend/admin/src/routes/board-list/board-member.svelte

@@ -0,0 +1,25 @@
+<script>
+    export let BoardMember;
+    export let title;
+    export let message;
+
+    function closeDialog() {
+        BoardMember.close();
+    }
+</script>
+
+<dialog bind:this={BoardMember} on:close>
+    <h3>{title}</h3>
+    <p>{message}</p>
+    <button on:click={closeDialog}>Cancel</button>
+</dialog>
+
+<style>
+    dialog {
+        border: 1px solid gray;
+        width: 80vw;
+        height: 80vh;
+        position: fixed;
+        padding: 20px;
+    }
+</style>

static/html/admin/_app/immutable/assets/3.757b6d73.css

@@ -0,0 +1 @@
+dialog.svelte-12pgist{border:1px solid gray;width:80vw;height:80vh;position:fixed;padding:20px}

static/html/admin/_app/immutable/assets/_page.757b6d73.css

@@ -0,0 +1 @@
+dialog.svelte-12pgist{border:1px solid gray;width:80vw;height:80vh;position:fixed;padding:20px}

static/html/admin/_app/immutable/chunks/paths.729c82dc.js

@@ -0,0 +1 @@
+var s;const e=((s=globalThis.__sveltekit_17h019z)==null?void 0:s.base)??"/admin";var a;const t=((a=globalThis.__sveltekit_17h019z)==null?void 0:a.assets)??e;export{t as a,e as b};