Changed project structure.

src/components/mod.rs

@@ -0,0 +1,2 @@
+pub mod modal_box;
+

src/components/modal_box.rs

@@ -0,0 +1,77 @@
+use crate::locales::trl;
+use leptos::*;
+
+#[derive(Copy, Clone)]
+pub struct DialogOpener {
+    visible: ReadSignal<bool>,
+    set_visible: WriteSignal<bool>,
+}
+
+impl DialogOpener {
+    pub fn new(cx: Scope) -> Self {
+        let (visible, set_visible) = create_signal(cx, false);
+        DialogOpener {
+            visible,
+            set_visible,
+        }
+    }
+
+    pub fn visible(&self) -> bool {
+        self.visible.get()
+    }
+
+    pub fn show(&self) {
+        self.set_visible.update(|state| *state = true);
+    }
+
+    pub fn hide(&self) {
+        self.set_visible.update(|state| *state = false);
+    }
+}
+
+#[component]
+pub fn ModalDialog(
+    cx: Scope,
+    opener: DialogOpener,
+    title: &'static str,
+    children: Children,
+) -> impl IntoView {
+    view! {cx,
+        <div class={ move || if opener.visible() {"modal fade show"} else {"modal fade"}}
+            style={ move || if opener.visible() {"display: block;"} else {""}}
+            id="modalCenter" tabindex="-1" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="modalCenterTitle">{trl(cx, title)}</h5>
+                        <button
+                            type="button"
+                            class="btn-close"
+                            data-bs-dismiss="modal"
+                            aria-label="Close"
+                            on:click=move |_| opener.hide()/>
+                        </div>
+                        {children(cx)}
+                    </div>
+                </div>
+            </div>
+    }
+}
+
+#[component]
+pub fn ModalBody(cx: Scope, children: Children) -> impl IntoView {
+    view! {cx,
+        <div class="modal-body">
+            {children(cx)}
+        </div>
+    }
+}
+
+#[component]
+pub fn ModalFooter(cx: Scope, children: Children) -> impl IntoView {
+    view! {cx,
+        <div class="modal-footer">
+           {children(cx)}
+        </div>
+    }
+}