Updated alert to daisyui

src/components/static_components/close_button.rs

@@ -19,10 +19,3 @@ pub fn CloseButtonSvg<G: Html>(cx: Scope) -> View<G> {
         }
     }
 }
-
-#[component]
-pub fn CloseButtonPath<G: Html>(cx: Scope) -> View<G> {
-    view! { cx,
-        path (d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"){}
-    }
-}

src/components/static_components/indicator.rs

@@ -0,0 +1,22 @@
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+#[component]
+pub fn ErrorSvg<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        svg (
+            xmlns="http://www.w3.org/2000/svg",
+            class="h-6 w-6 shrink-0 stroke-current",
+            fill="none",
+            viewBox="0 0 24 24",
+        )
+        {
+            path (
+                stroke-linecap="round",
+                stroke-linejoin="round",
+                stroke-width="2",
+                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z",
+            ){}
+        }
+    }
+}

src/components/static_components/mod.rs

@@ -1 +1,2 @@
 pub mod close_button;
+pub mod indicator;

src/components/sub_components/error_block.rs

@@ -1,35 +1,22 @@
 use perseus::prelude::*;
 use sycamore::prelude::*;
-use web_sys::Event;
 
-use crate::components::static_components::close_button::CloseButtonPath;
+use crate::components::static_components::indicator::ErrorSvg;
 
 #[component(inline_props)]
 pub fn ErrorBlock<'a, G: Html>(cx: Scope<'a>, error: RcSignal<String>) -> View<G> {
     let error = create_ref(cx, error);
     let is_empty = create_selector(cx, || error.get().is_empty());
 
-    let close_block = move |_event: Event| {
-        #[cfg(client)]
-        {
-            spawn_local_scoped(cx, async move { error.set(String::new()) });
-        }
-    };
-
     view! { cx,
         (match !(*is_empty.get()) {
             true => { view!{cx,
+                div (role="alert", class="alert alert-error") {
+                    // Error icon
+                    ErrorSvg {}
 
-                div (class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative", role="alert") {
-                    span (class="block sm:inline"){
-                        p {(*error.get())}
-                    }
-                    span (class="absolute top-0 bottom-0 right-0 px-4 py-3"){
-                        svg (on:click = close_block, class="fill-current h-6 w-6 text-red-500", role="button", viewBox="0 0 20 20") {
-                            title {"Close"}
-                            CloseButtonPath {}
-                        }
-                    }
+                    // Error text
+                    span {(*error.get())}
                 }
             }},
             false => {view!{cx,}},