From abbece5f53ac27a8eee32bae296cd6a07a24c56e Mon Sep 17 00:00:00 2001 From: Matthew Kaminski Date: Thu, 29 Aug 2024 23:15:22 -0400 Subject: [PATCH] Add static components, change error design --- src/capsules/forgot_password_form.rs | 2 +- src/capsules/login_form.rs | 2 +- src/capsules/register_form.rs | 2 +- src/components/error_block.rs | 37 ------------------ src/components/mod.rs | 3 +- .../static_components/close_button_path.rs | 9 +++++ src/components/static_components/mod.rs | 1 + src/components/sub_components/error_block.rs | 38 +++++++++++++++++++ src/components/sub_components/mod.rs | 1 + 9 files changed, 54 insertions(+), 41 deletions(-) delete mode 100644 src/components/error_block.rs create mode 100644 src/components/static_components/close_button_path.rs create mode 100644 src/components/static_components/mod.rs create mode 100644 src/components/sub_components/error_block.rs create mode 100644 src/components/sub_components/mod.rs diff --git a/src/capsules/forgot_password_form.rs b/src/capsules/forgot_password_form.rs index bf914eb..3e50a0f 100644 --- a/src/capsules/forgot_password_form.rs +++ b/src/capsules/forgot_password_form.rs @@ -4,7 +4,7 @@ use serde::{Deserialize, Serialize}; use sycamore::prelude::*; use web_sys::Event; -use crate::components::error_block::ErrorBlock; +use crate::components::sub_components::error_block::ErrorBlock; cfg_if::cfg_if! { if #[cfg(client)] { diff --git a/src/capsules/login_form.rs b/src/capsules/login_form.rs index 2db3b73..8770d36 100644 --- a/src/capsules/login_form.rs +++ b/src/capsules/login_form.rs @@ -4,7 +4,7 @@ use serde::{Deserialize, Serialize}; use sycamore::prelude::*; use web_sys::Event; -use crate::components::error_block::{ErrorBlock, ErrorBlockProps}; +use crate::components::sub_components::error_block::ErrorBlock; cfg_if::cfg_if! { if #[cfg(client)] { diff --git a/src/capsules/register_form.rs b/src/capsules/register_form.rs index d662042..87f8b47 100644 --- a/src/capsules/register_form.rs +++ b/src/capsules/register_form.rs @@ -4,7 +4,7 @@ use serde::{Deserialize, Serialize}; use sycamore::prelude::*; use web_sys::Event; -use crate::components::error_block::ErrorBlock; +use crate::components::sub_components::error_block::ErrorBlock; cfg_if::cfg_if! { if #[cfg(client)] { diff --git a/src/components/error_block.rs b/src/components/error_block.rs deleted file mode 100644 index b66751b..0000000 --- a/src/components/error_block.rs +++ /dev/null @@ -1,37 +0,0 @@ -use perseus::prelude::*; -use sycamore::prelude::*; -use web_sys::Event; - -cfg_if::cfg_if! { - if #[cfg(client)] { - use crate::{ - state_enums::OpenState, - }; - } -} - -#[derive(Prop, Debug, Clone)] -pub struct ErrorBlockProps { - error: RcSignal, -} - -#[component(inline_props)] -pub fn ErrorBlock<'a, G: Html>(cx: Scope<'a>, error: RcSignal) -> View { - let error = create_ref(cx, error); - let is_empty = create_selector(cx, || error.get().is_empty()); - view! { cx, - (match !(*is_empty.get()) { - true => { view!{cx, - div (role="alert") { - div (class="bg-red-500 text-white font-bold rounded-t px-4 py-2") { - "Error" - } - div (class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700"){ - p {(*error.get())} - } - } - }}, - false => {view!{cx,}}, - }) - } -} diff --git a/src/components/mod.rs b/src/components/mod.rs index f106093..9e82fad 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -1,3 +1,4 @@ -pub mod error_block; mod header; pub mod layout; +pub mod static_components; +pub mod sub_components; diff --git a/src/components/static_components/close_button_path.rs b/src/components/static_components/close_button_path.rs new file mode 100644 index 0000000..e1df776 --- /dev/null +++ b/src/components/static_components/close_button_path.rs @@ -0,0 +1,9 @@ +use perseus::prelude::*; +use sycamore::prelude::*; + +#[component] +pub fn CloseButtonPath(cx: Scope) -> View { + 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"){} + } +} diff --git a/src/components/static_components/mod.rs b/src/components/static_components/mod.rs new file mode 100644 index 0000000..590f273 --- /dev/null +++ b/src/components/static_components/mod.rs @@ -0,0 +1 @@ +pub mod close_button_path; diff --git a/src/components/sub_components/error_block.rs b/src/components/sub_components/error_block.rs new file mode 100644 index 0000000..a55bbd5 --- /dev/null +++ b/src/components/sub_components/error_block.rs @@ -0,0 +1,38 @@ +use perseus::prelude::*; +use sycamore::prelude::*; +use web_sys::Event; + +use crate::components::static_components::close_button_path::CloseButtonPath; + +#[component(inline_props)] +pub fn ErrorBlock<'a, G: Html>(cx: Scope<'a>, error: RcSignal) -> View { + 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 (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 {} + } + } + } + }}, + false => {view!{cx,}}, + }) + } +} diff --git a/src/components/sub_components/mod.rs b/src/components/sub_components/mod.rs new file mode 100644 index 0000000..6d2012d --- /dev/null +++ b/src/components/sub_components/mod.rs @@ -0,0 +1 @@ +pub mod error_block;