feat(ui): Add tag component to match the svelte-shadcnui pills

This commit is contained in:
Suyog Tandel
2026-02-22 00:53:31 +05:30
parent 08b7c02421
commit b6ea8d4e99
4 changed files with 63 additions and 41 deletions
+1
View File
@@ -3,3 +3,4 @@ pub mod card;
pub mod dialog;
pub mod page_view;
pub mod sidebar;
pub mod tag;
+41
View File
@@ -0,0 +1,41 @@
use gpui::*;
#[derive(IntoElement)]
pub struct Tag {
label: SharedString,
active: bool,
}
impl Tag {
pub fn new(label: impl Into<SharedString>) -> Self {
Self {
label: label.into(),
active: false,
}
}
pub fn active(mut self, active: bool) -> Self {
self.active = active;
self
}
}
impl RenderOnce for Tag {
fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
let (bg, text) = if self.active {
(rgb(0xffffff), rgb(0x000000))
} else {
(rgb(0x27272a), rgb(0xffffff))
};
div()
.px_2p5()
.py_0p5()
.rounded_xl()
.text_xs()
.font_weight(FontWeight::MEDIUM)
.bg(bg)
.text_color(text)
.child(self.label)
}
}
+3 -3
View File
@@ -1,7 +1,7 @@
// src/views/about.rs
use crate::ui::components::{card::Card, page_view::PageView};
use crate::ui::components::{card::Card, page_view::PageView, tag::Tag};
use gpui::*;
use gpui_component::{Icon, StyledExt, Theme, badge::Badge, button::Button, h_flex, v_flex};
use gpui_component::{Icon, StyledExt, Theme, button::Button, h_flex, v_flex};
pub struct AboutView;
@@ -38,7 +38,7 @@ impl AboutView {
.text_color(theme.foreground)
.child("PicoForge"),
)
.child(Badge::new().child("v0.4.0").color(theme.secondary))
.child(Tag::new("v0.4.0"))
.child(
div()
.text_color(theme.muted_foreground)
+18 -38
View File
@@ -1,9 +1,9 @@
use crate::device::types::DeviceMethod;
use crate::ui::components::{card::Card, page_view::PageView};
use crate::ui::components::{card::Card, page_view::PageView, tag::Tag};
use crate::ui::types::GlobalDeviceState;
use gpui::*;
use gpui_component::StyledExt;
use gpui_component::{Icon, IconName, Theme, badge::Badge, h_flex, progress::Progress, v_flex};
use gpui_component::{Icon, IconName, Theme, h_flex, progress::Progress, v_flex};
pub struct HomeView;
@@ -271,13 +271,8 @@ impl HomeView {
.child("LED Dimmable"),
)
.child(
Badge::new()
.child(if config.led_dimmable { "Yes" } else { "No" })
.color(if config.led_dimmable {
theme.primary
} else {
theme.secondary
}),
Tag::new(if config.led_dimmable { "Yes" } else { "No" })
.active(config.led_dimmable),
),
)
.child(
@@ -289,13 +284,8 @@ impl HomeView {
.child("LED Steady Mode"),
)
.child(
Badge::new()
.child(if config.led_steady { "On" } else { "Off" })
.color(if config.led_steady {
theme.primary
} else {
theme.secondary
}),
Tag::new(if config.led_steady { "On" } else { "Off" })
.active(config.led_steady),
),
)
.into_any_element()
@@ -332,17 +322,12 @@ impl HomeView {
.text_color(rgb(0xfe9a00))
})
.child(
Badge::new()
.child(if status.secure_boot {
"Secure Boot"
} else {
"Development"
})
.color(if status.secure_boot {
theme.primary
} else {
theme.secondary
}),
Tag::new(if status.secure_boot {
"Secure Boot"
} else {
"Development"
})
.active(status.secure_boot),
),
),
)
@@ -373,17 +358,12 @@ impl HomeView {
.child("Secure Lock"),
)
.child(
Badge::new()
.child(if status.secure_lock {
"Acknowledged"
} else {
"Pending"
})
.color(if status.secure_lock {
gpui::red()
} else {
theme.secondary
}),
Tag::new(if status.secure_lock {
"Acknowledged"
} else {
"Pending"
})
.active(status.secure_lock),
),
),
)