51 lines
1.6 KiB
Rust
51 lines
1.6 KiB
Rust
use crate::components::icons;
|
|
use crate::components::outlined_box::OutlinedBox;
|
|
use crate::gradient::Gradient;
|
|
use leptos::prelude::*;
|
|
|
|
#[component]
|
|
pub fn Checkbox(checked: RwSignal<bool>, #[prop(into)] text: Signal<String>, #[prop(optional)] color: Gradient) -> impl IntoView {
|
|
let unique_id = Oco::from(format!("checkbox-{}", uuid::Uuid::new_v4()));
|
|
|
|
let checkbox_view = view! {
|
|
<div class="self-center my-2.5 mx-5 text-white bg-white rounded-xs aspect-square">
|
|
<span class=("text-gray-950", move || checked.get())>
|
|
<icons::Check />
|
|
</span>
|
|
</div>
|
|
};
|
|
|
|
let separator = {
|
|
let mut classes = "w-0.5 bg-linear-to-br min-w-0.5".to_string();
|
|
classes.push(' ');
|
|
classes.push_str(color.class_from());
|
|
classes.push(' ');
|
|
classes.push_str(color.class_to());
|
|
view! { <div class=classes /> }
|
|
};
|
|
|
|
let text_view = view! {
|
|
<div class="self-center my-2.5 mx-5 w-full text-lg font-thin uppercase">
|
|
{move || text.get()}
|
|
</div>
|
|
};
|
|
|
|
view! {
|
|
<div class="inline-block mb-2 me-2 hover:brightness-125 active:brightness-90">
|
|
<input
|
|
type="checkbox"
|
|
id=unique_id.clone()
|
|
value=""
|
|
class="hidden peer"
|
|
required=""
|
|
bind:checked=checked
|
|
/>
|
|
<label for=unique_id class="cursor-pointer">
|
|
<OutlinedBox color>
|
|
<div class="flex">{checkbox_view} {separator} {text_view}</div>
|
|
</OutlinedBox>
|
|
</label>
|
|
</div>
|
|
}
|
|
}
|