guise-ui 1.5.3

A component library for gpui, Zed's GPU-accelerated UI framework: a themed palette, sizing tokens, 130+ composable components, a reactive state layer, and an in-app Safari-style inspector.
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

//! `Space` — a fixed spacing block on one axis, sized by the theme's
//! spacing scale.
//!
//! ```ignore
//! use guise::prelude::*;
//!
//! Stack::new()
//!     .child(Title::new("Heading").order(3))
//!     .child(Space::y(Size::Md))
//!     .child(Text::new("Body copy."))
//! ```

use gpui::prelude::*;
use gpui::{div, px, App, IntoElement, Window};

use crate::devtools::Probed;
use crate::theme::{theme, Size};

/// The axis a [`Space`] occupies.
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
enum SpaceAxis {
  Horizontal,
  Vertical,
}

/// A fixed gap between siblings.
#[derive(IntoElement)]
pub struct Space {
  axis: SpaceAxis,
  size: Size,
}

impl Space {
  /// Horizontal space: a block `size` wide (for rows).
  pub fn x(size: Size) -> Self {
    Space {
      axis: SpaceAxis::Horizontal,
      size,
    }
  }

  /// Vertical space: a block `size` tall (for columns).
  pub fn y(size: Size) -> Self {
    Space {
      axis: SpaceAxis::Vertical,
      size,
    }
  }
}

impl RenderOnce for Space {
  fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
    let gap = theme(cx).spacing(self.size);
    let el = div().flex_none();

    let element = match self.axis {
      SpaceAxis::Horizontal => el.w(px(gap)),
      SpaceAxis::Vertical => el.h(px(gap)),
    };

    element.probe("Space")
  }
}