42 lines
1.5 KiB
Rust
42 lines
1.5 KiB
Rust
use leptos::prelude::*;
|
|
use tailwind_fuse::tw_merge;
|
|
|
|
#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
|
|
pub enum BadgeVariant {
|
|
#[default]
|
|
Default,
|
|
Secondary,
|
|
Destructive,
|
|
Success,
|
|
Warning,
|
|
Info,
|
|
}
|
|
|
|
#[component]
|
|
pub fn Badge(
|
|
children: Children,
|
|
#[prop(optional, default = BadgeVariant::Default)] variant: BadgeVariant,
|
|
#[prop(optional, into)] class: String,
|
|
) -> impl IntoView {
|
|
let variant_classes = match variant {
|
|
BadgeVariant::Default => "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
|
|
BadgeVariant::Secondary => "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
BadgeVariant::Destructive => "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
|
BadgeVariant::Success => "border-transparent bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/20",
|
|
BadgeVariant::Warning => "border-transparent bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 border-yellow-500/20",
|
|
BadgeVariant::Info => "border-transparent bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
|
|
};
|
|
|
|
let class = tw_merge!(
|
|
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
variant_classes,
|
|
class
|
|
);
|
|
|
|
view! {
|
|
<div class=class>
|
|
{children()}
|
|
</div>
|
|
}
|
|
}
|