1use gpui::{
 2    div, px, Component, Div, ParentElement, Render, SharedString, StatefulInteraction, Styled,
 3    View, VisualContext, WindowContext,
 4};
 5use theme2::ActiveTheme;
 6
 7pub struct ScrollStory;
 8
 9impl ScrollStory {
10    pub fn view(cx: &mut WindowContext) -> View<ScrollStory> {
11        cx.build_view(|cx| ScrollStory)
12    }
13}
14
15impl Render for ScrollStory {
16    type Element = Div<Self, StatefulInteraction<Self>>;
17
18    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Element {
19        let theme = cx.theme();
20        let color_1 = theme.styles.git.created;
21        let color_2 = theme.styles.git.modified;
22
23        div()
24            .id("parent")
25            .bg(theme.colors().background)
26            .size_full()
27            .overflow_scroll()
28            .children((0..10).map(|row| {
29                div()
30                    .w(px(1000.))
31                    .h(px(100.))
32                    .flex()
33                    .flex_row()
34                    .children((0..10).map(|column| {
35                        let id = SharedString::from(format!("{}, {}", row, column));
36                        let bg = if row % 2 == column % 2 {
37                            color_1
38                        } else {
39                            color_2
40                        };
41                        div().id(id).bg(bg).size(px(100. as f32)).when(
42                            row >= 5 && column >= 5,
43                            |d| {
44                                d.overflow_scroll()
45                                    .child(div().size(px(50.)).bg(color_1))
46                                    .child(div().size(px(50.)).bg(color_2))
47                                    .child(div().size(px(50.)).bg(color_1))
48                                    .child(div().size(px(50.)).bg(color_2))
49                            },
50                        )
51                    }))
52            }))
53    }
54}