hikari-components 0.2.2

Core UI components (40+) for the Hikari design system
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

// hi-components/src/basic/arrow.rs
// Arrow indicator component with rotation support

use hikari_icons::mdi_minimal::MdiIcon;
use hikari_icons::{Icon, IconProps};
use hikari_palette::classes::ClassesBuilder;
use hikari_palette::classes::components::ArrowClass;

use crate::StyledComponent;
use crate::prelude::*;

pub struct ArrowComponent;

#[derive(Clone, Copy, PartialEq, Debug, Default)]
pub enum ArrowDirection {
    #[default]
    Right,
    Left,
    Up,
    Down,
}

impl IntoAttrValue for ArrowDirection {
    fn into_attr_value(self) -> Option<String> {
        Some(match self {
            ArrowDirection::Right => "right".to_string(),
            ArrowDirection::Left => "left".to_string(),
            ArrowDirection::Up => "up".to_string(),
            ArrowDirection::Down => "down".to_string(),
        })
    }
}

///
///
///
///
///
#[component]
pub fn Arrow(
    #[props(default)] direction: ArrowDirection,

    #[props(default = 16)] size: u32,

    #[props(default)] class: String,
) -> Element {
    // Determine direction class
    let direction_class = match direction {
        ArrowDirection::Right => Some(ArrowClass::ArrowRight),
        ArrowDirection::Left => Some(ArrowClass::ArrowLeft),
        ArrowDirection::Up => Some(ArrowClass::ArrowUp),
        ArrowDirection::Down => Some(ArrowClass::ArrowDown),
    };

    // Determine size class
    let size_class = match size {
        14 => Some(ArrowClass::Size14),
        16 => Some(ArrowClass::Size16),
        20 => Some(ArrowClass::Size20),
        _ => None,
    };

    // Build classes
    let mut builder = ClassesBuilder::new().add_typed(ArrowClass::Arrow);

    if let Some(dir) = direction_class {
        builder = builder.add_typed(dir);
    }

    if let Some(sz) = size_class {
        builder = builder.add_typed(sz);
    }

    builder = builder.add(&class);

    let classes = builder.build();

    rsx! {
        span {
            class: classes,
            Icon {
                icon: MdiIcon::ChevronRight,
                size,
            }
        }
    }
}

impl StyledComponent for ArrowComponent {
    fn styles() -> &'static str {
        include_str!(concat!(env!("OUT_DIR"), "/styles/arrow.css"))
    }

    fn name() -> &'static str {
        "arrow"
    }
}