orbital_base_components/overlay/inline/badge/
base.rs1use leptos::prelude::*;
2
3#[derive(Clone, Copy, Default, PartialEq, Eq)]
4pub enum BadgeAppearance {
5 #[default]
6 Filled,
7 Tint,
8 Outline,
9 Ghost,
10}
11
12impl BadgeAppearance {
13 pub fn as_str(&self) -> &'static str {
14 match self {
15 Self::Filled => "filled",
16 Self::Tint => "tint",
17 Self::Outline => "outline",
18 Self::Ghost => "ghost",
19 }
20 }
21}
22
23#[derive(Clone, Copy, Default, PartialEq, Eq)]
24pub enum BadgeColor {
25 #[default]
26 Brand,
27 Danger,
28 Important,
29 Informative,
30 Severe,
31 Subtle,
32 Success,
33 Warning,
34}
35
36impl BadgeColor {
37 pub fn as_str(&self) -> &'static str {
38 match self {
39 Self::Brand => "brand",
40 Self::Danger => "danger",
41 Self::Important => "important",
42 Self::Informative => "informative",
43 Self::Severe => "severe",
44 Self::Subtle => "subtle",
45 Self::Success => "success",
46 Self::Warning => "warning",
47 }
48 }
49}
50
51#[derive(Clone, Copy, Default, PartialEq, Eq)]
52pub enum BadgeSize {
53 ExtraSmall,
54 Small,
55 #[default]
56 Medium,
57 Large,
58 ExtraLarge,
59}
60
61impl BadgeSize {
62 pub fn as_str(&self) -> &'static str {
63 match self {
64 Self::ExtraSmall => "extra-small",
65 Self::Small => "small",
66 Self::Medium => "medium",
67 Self::Large => "large",
68 Self::ExtraLarge => "extra-large",
69 }
70 }
71}
72
73#[component]
74pub fn BaseBadge(
75 #[prop(optional, into)] class: MaybeProp<String>,
76 #[prop(optional, into)] appearance: Signal<BadgeAppearance>,
77 #[prop(optional, into)] color: Signal<BadgeColor>,
78 #[prop(optional, into)] size: Signal<BadgeSize>,
79 children: Children,
80) -> impl IntoView {
81 view! {
82 <span
83 class=move || {
84 let mut parts = vec![
85 "orbital-badge".to_string(),
86 format!("orbital-badge--{}", appearance.get().as_str()),
87 format!("orbital-badge--{}", color.get().as_str()),
88 format!("orbital-badge--{}", size.get().as_str()),
89 ];
90 if let Some(extra) = class.get() {
91 if !extra.is_empty() {
92 parts.push(extra);
93 }
94 }
95 parts.join(" ")
96 }
97 >
98 {children()}
99 </span>
100 }
101}