feat(ui): use official rustui shimmer component for torrent details
This commit is contained in:
@@ -1,13 +1,52 @@
|
||||
use leptos::prelude::*;
|
||||
use tw_merge::tw_merge;
|
||||
use tw_merge::*;
|
||||
|
||||
use crate::components::hooks::use_random::use_random_id_for;
|
||||
|
||||
#[component]
|
||||
pub fn Shimmer(
|
||||
#[prop(optional, into)] class: String,
|
||||
/// Controls shimmer visibility (works with any bool signal)
|
||||
#[prop(into)]
|
||||
loading: Signal<bool>,
|
||||
|
||||
/// Color of the shimmer wave (default: "rgba(255,255,255,0.15)")
|
||||
#[prop(into, optional)]
|
||||
shimmer_color: Option<String>,
|
||||
|
||||
/// Background color of shimmer blocks (default: "rgba(255,255,255,0.08)")
|
||||
#[prop(into, optional)]
|
||||
background_color: Option<String>,
|
||||
|
||||
/// Animation duration in seconds (default: 1.5)
|
||||
#[prop(optional)]
|
||||
duration: Option<f64>,
|
||||
|
||||
/// Fallback border-radius for text elements in px (default: 4)
|
||||
#[prop(optional)]
|
||||
fallback_border_radius: Option<f64>,
|
||||
|
||||
/// Additional classes
|
||||
#[prop(into, optional)]
|
||||
class: String,
|
||||
|
||||
/// Children to wrap
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
let merged_class = tw_merge!(
|
||||
"relative overflow-hidden bg-muted before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent dark:before:via-white/5",
|
||||
class
|
||||
);
|
||||
view! { <div class=merged_class /> }
|
||||
}
|
||||
let shimmer_id = use_random_id_for("Shimmer");
|
||||
let merged_class = tw_merge!("relative", class);
|
||||
|
||||
view! {
|
||||
<div
|
||||
id=shimmer_id
|
||||
class=merged_class
|
||||
data-name="Shimmer"
|
||||
data-shimmer-loading=move || loading.get().to_string()
|
||||
data-shimmer-color=shimmer_color
|
||||
data-shimmer-bg-color=background_color
|
||||
data-shimmer-duration=duration.map(|d| d.to_string())
|
||||
data-shimmer-fallback-radius=fallback_border_radius.map(|r| r.to_string())
|
||||
>
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user