boltz-ui 0.2.9

High-level reusable GPUI UI components (Label, Button, Input, etc.).
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

use gpui::AnyElement;

use crate::Avatar;
use crate::prelude::*;

/// A vertical activity timeline: a left connecting line with avatar + text +
/// timestamp entries (Tailwind "Feed").
#[derive(IntoElement, RegisterComponent)]
pub struct Feed {
    entries: Vec<(AnyElement, SharedString, SharedString)>,
}

impl Feed {
    pub fn new() -> Self {
        Self {
            entries: Vec::new(),
        }
    }

    pub fn entry(
        mut self,
        avatar: impl IntoElement,
        content: impl Into<SharedString>,
        timestamp: impl Into<SharedString>,
    ) -> Self {
        self.entries
            .push((avatar.into_any_element(), content.into(), timestamp.into()));
        self
    }
}

impl Default for Feed {
    fn default() -> Self {
        Self::new()
    }
}

impl RenderOnce for Feed {
    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
        v_flex()
            .w_full()
            .border_l_1()
            .border_color(semantic::border_muted(cx))
            .pl_4()
            .children(
                self.entries
                    .into_iter()
                    .map(|(avatar, content, timestamp)| {
                        h_flex().items_start().gap_3().mb_4().child(avatar).child(
                            v_flex().gap_0p5().child(Label::new(content)).child(
                                Label::new(timestamp)
                                    .size(LabelSize::XSmall)
                                    .color(Color::Muted),
                            ),
                        )
                    }),
            )
    }
}

impl Component for Feed {
    fn scope() -> ComponentScope {
        ComponentScope::DataDisplay
    }

    fn description() -> Option<&'static str> {
        Some("A vertical activity timeline with a connecting line and avatar/text entries.")
    }

    fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
        let example_avatar = "https://avatars.githubusercontent.com/u/1714999?v=4";

        Some(
            v_flex()
                .gap_6()
                .child(
                    Feed::new()
                        .entry(
                            Avatar::new(example_avatar).size(px(32.)),
                            "Jane Cooper created the project",
                            "1h ago",
                        )
                        .entry(
                            Avatar::new(example_avatar).size(px(32.)),
                            "Cody Fisher commented on an issue",
                            "3h ago",
                        )
                        .entry(
                            Avatar::new(example_avatar).size(px(32.)),
                            "Jenny Wilson closed the milestone",
                            "1d ago",
                        ),
                )
                .into_any_element(),
        )
    }
}