1use super::selectable_tile::SelectableTile;
2use component::{example_group_with_title, single_example};
3use gpui::{
4 AnyElement, App, IntoElement, RenderOnce, StatefulInteractiveElement, Window, prelude::*,
5};
6use smallvec::SmallVec;
7use ui::{Label, prelude::*};
8
9#[derive(IntoElement, RegisterComponent)]
10pub struct SelectableTileRow {
11 gap: Pixels,
12 tiles: SmallVec<[SelectableTile; 8]>,
13}
14
15impl SelectableTileRow {
16 pub fn new() -> Self {
17 Self {
18 gap: px(12.),
19 tiles: SmallVec::new(),
20 }
21 }
22
23 pub fn gap(mut self, gap: impl Into<Pixels>) -> Self {
24 self.gap = gap.into();
25 self
26 }
27
28 pub fn tile(mut self, tile: SelectableTile) -> Self {
29 self.tiles.push(tile);
30 self
31 }
32}
33
34impl RenderOnce for SelectableTileRow {
35 fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
36 h_flex().w_full().px_5().gap(self.gap).children(self.tiles)
37 }
38}
39
40impl Component for SelectableTileRow {
41 fn scope() -> ComponentScope {
42 ComponentScope::Layout
43 }
44
45 fn sort_name() -> &'static str {
46 "RowSelectableTile"
47 }
48
49 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
50 let examples = example_group_with_title(
51 "SelectableTileRow Examples",
52 vec![
53 single_example(
54 "Theme Tiles",
55 SelectableTileRow::new()
56 .gap(px(12.))
57 .tile(
58 SelectableTile::new("tile1", px(100.), px(80.))
59 .selected(true)
60 .child(
61 div()
62 .size_full()
63 .bg(gpui::red())
64 .flex()
65 .items_center()
66 .justify_center()
67 .child(Label::new("Dark")),
68 ),
69 )
70 .tile(
71 SelectableTile::new("tile2", px(100.), px(80.)).child(
72 div()
73 .size_full()
74 .bg(gpui::green())
75 .flex()
76 .items_center()
77 .justify_center()
78 .child(Label::new("Light")),
79 ),
80 )
81 .tile(
82 SelectableTile::new("tile3", px(100.), px(80.))
83 .parent_focused(true)
84 .child(
85 div()
86 .size_full()
87 .bg(gpui::blue())
88 .flex()
89 .items_center()
90 .justify_center()
91 .child(Label::new("Auto")),
92 ),
93 )
94 .into_any_element(),
95 ),
96 single_example(
97 "Icon Tiles",
98 SelectableTileRow::new()
99 .gap(px(8.))
100 .tile(
101 SelectableTile::new("icon1", px(48.), px(48.))
102 .selected(true)
103 .child(Icon::new(IconName::Code).size(IconSize::Medium)),
104 )
105 .tile(
106 SelectableTile::new("icon2", px(48.), px(48.))
107 .child(Icon::new(IconName::Terminal).size(IconSize::Medium)),
108 )
109 .tile(
110 SelectableTile::new("icon3", px(48.), px(48.))
111 .child(Icon::new(IconName::FileCode).size(IconSize::Medium)),
112 )
113 .tile(
114 SelectableTile::new("icon4", px(48.), px(48.))
115 .child(Icon::new(IconName::Settings).size(IconSize::Medium)),
116 )
117 .into_any_element(),
118 ),
119 ],
120 );
121
122 Some(v_flex().p_4().gap_4().child(examples).into_any_element())
123 }
124}