1#![cfg_attr(target_family = "wasm", no_main)]
2
3use gpui::{
4 App, Bounds, Context, Hsla, Window, WindowBounds, WindowOptions, div, prelude::*, px, rgb, size,
5};
6use gpui_platform::application;
7
8// https://en.wikipedia.org/wiki/Holy_grail_(web_design)
9struct HolyGrailExample {}
10
11impl Render for HolyGrailExample {
12 fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
13 let block = |color: Hsla| {
14 div()
15 .size_full()
16 .bg(color)
17 .border_1()
18 .border_dashed()
19 .rounded_md()
20 .border_color(gpui::white())
21 .items_center()
22 };
23
24 div()
25 .gap_1()
26 .grid()
27 .bg(rgb(0x505050))
28 .size(px(500.0))
29 .shadow_lg()
30 .border_1()
31 .size_full()
32 .grid_cols(5)
33 .grid_rows(5)
34 .child(
35 block(gpui::white())
36 .row_span(1)
37 .col_span_full()
38 .child("Header"),
39 )
40 .child(
41 block(gpui::red())
42 .col_span(1)
43 .h_56()
44 .child("Table of contents"),
45 )
46 .child(
47 block(gpui::green())
48 .col_span(3)
49 .row_span(3)
50 .child("Content"),
51 )
52 .child(
53 block(gpui::blue())
54 .col_span(1)
55 .row_span(3)
56 .child("AD :(")
57 .text_color(gpui::white()),
58 )
59 .child(
60 block(gpui::black())
61 .row_span(1)
62 .col_span_full()
63 .text_color(gpui::white())
64 .child("Footer"),
65 )
66 }
67}
68
69fn run_example() {
70 application().run(|cx: &mut App| {
71 let bounds = Bounds::centered(None, size(px(500.), px(500.0)), cx);
72 cx.open_window(
73 WindowOptions {
74 window_bounds: Some(WindowBounds::Windowed(bounds)),
75 ..Default::default()
76 },
77 |_, cx| cx.new(|_| HolyGrailExample {}),
78 )
79 .unwrap();
80 cx.activate(true);
81 });
82}
83
84#[cfg(not(target_family = "wasm"))]
85fn main() {
86 run_example();
87}
88
89#[cfg(target_family = "wasm")]
90#[wasm_bindgen::prelude::wasm_bindgen(start)]
91pub fn start() {
92 gpui_platform::web_init();
93 run_example();
94}