Status
Rust UI component for displaying statuses.
use leptos::prelude::*;
use crate::components::extensions::status::Status;
#[component]
pub fn DemoStatus() -> impl IntoView {
view! {
<Status>
<div class="rounded-md size-16 bg-neutral-500" />
</Status>
}
}
Demos
1. Variants
use leptos::prelude::*;
use crate::components::extensions::status::{Status, StatusIndactorVariant};
#[component]
pub fn DemoStatusVariants() -> impl IntoView {
view! {
<div class="flex gap-4">
<Status variant=StatusIndactorVariant::Normal>
<DemoContainer />
</Status>
<Status variant=StatusIndactorVariant::Active>
<DemoContainer />
</Status>
<Status variant=StatusIndactorVariant::Inactive>
<DemoContainer />
</Status>
</div>
}
}
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ FUNCTIONS ✨ */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
#[component]
fn DemoContainer() -> impl IntoView {
view! { <div class="rounded-md size-16 bg-neutral-500" /> }
}
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_statusui add statusUpdate the imports to match your project setup.
Copy and paste the following code into your project:
components/ui/status.rs
use leptos::prelude::*;
use tw_merge::*;
use crate::components::ui::_animations::ANIMATIONS;
use crate::components::ui::_styles::STYLES;
#[component]
pub fn Status(
#[prop(into, optional)] class: Signal<String>,
#[prop(into, optional)] variant: StatusIndactorVariant,
children: Children,
) -> impl IntoView {
let class = Memo::new(move |_| tw_merge!(STYLES::RELATIVE, class()));
view! {
<div class=class>
{children()} <StatusIndactor variant=variant class=ANIMATIONS::PING />
<StatusIndactor variant=variant />
</div>
}
}
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ FUNCTIONS ✨ */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
#[derive(TwClass, Clone, Copy)]
#[tw(class = "absolute top-0 right-0 -mt-1 -mr-1 rounded-full size-4")]
pub struct StatusIndactorClass {
pub variant: StatusIndactorVariant,
}
#[derive(TwVariant)]
pub enum StatusIndactorVariant {
#[tw(default, class = "bg-neutral-300")]
Default,
#[tw(class = "bg-green-300 ")]
Active,
#[tw(class = "bg-orange-300 ")]
Inactive,
#[tw(class = "bg-sky-300 ")]
Normal,
}
#[component]
pub fn StatusIndactor(
#[prop(into, optional)] variant: Signal<StatusIndactorVariant>,
#[prop(into, optional)] class: Signal<String>,
) -> impl IntoView {
let class = Memo::new(move |_| {
let status_indicator = StatusIndactorClass {
variant: variant.get(),
};
status_indicator.with_class(class.get())
});
view! { <div class=class /> }
}
Update the imports to match your project setup.
Usage
// Coming soon 🦀