thaw/demo/src/components/site_header.rs

154 lines
5.1 KiB
Rust
Raw Normal View History

2023-06-18 19:40:23 +08:00
use leptos::*;
use leptos_router::use_navigate;
2023-11-05 16:03:58 +08:00
use thaw::*;
2023-06-18 19:40:23 +08:00
#[component]
2023-08-29 09:11:22 +08:00
pub fn SiteHeader() -> impl IntoView {
2023-10-24 21:49:36 +08:00
let theme = use_rw_theme();
2023-10-26 23:24:16 +08:00
let theme_name = create_memo(move |_| {
theme.with(|theme| {
if theme.name == "light".to_string() {
"Dark"
} else {
"Light"
}
})
});
2023-10-24 21:49:36 +08:00
let on_theme = move |_| {
2023-10-26 23:24:16 +08:00
if theme_name.get_untracked() == "Light" {
2023-10-24 21:49:36 +08:00
theme.set(Theme::light())
} else {
theme.set(Theme::dark())
}
};
2023-10-26 16:53:51 +08:00
let style = create_memo(move |_| {
theme.with(|theme| {
2023-11-02 21:29:45 +08:00
format!("height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid {}", theme.common.border_color)
2023-10-26 16:53:51 +08:00
})
});
2023-11-08 17:27:01 +08:00
let search_value = create_rw_signal(String::new());
let search_all_options = store_value(gen_search_all_options());
let search_options = create_memo(move |_| {
let search_value = search_value.get();
if search_value.is_empty() {
return vec![];
}
fn match_value(pattern: &str, value: String) -> bool {
if pattern.is_empty() {
return true;
}
if value.is_empty() {
return false;
}
if pattern.chars().next() == value.chars().next() {
return match_value(pattern.split_at(1).1, value.split_at(1).1.to_string());
}
match_value(pattern, value.split_at(1).1.to_string())
}
search_all_options.with_value(|options| {
let search_value = search_value
.to_lowercase()
.replace(" ", "")
.replace("-", "");
let search_value = if search_value.len() > 20 {
search_value.split_at(20).0
} else {
&search_value
};
options
.iter()
.filter(|option| {
let label = option
.label
.to_lowercase()
.replace(" ", "")
.replace("-", "");
match_value(search_value, label)
})
.cloned()
.collect()
})
});
2023-08-29 09:11:22 +08:00
view! {
2023-10-26 16:53:51 +08:00
<LayoutHeader style>
2023-11-02 21:29:45 +08:00
<Space>
2023-11-05 16:03:58 +08:00
<img src="/thaw/logo.svg" style="width: 36px"/>
2023-11-02 21:29:45 +08:00
<div
style="cursor: pointer; display: flex; align-items: center; height: 100%; font-weight: 600; font-size: 20px"
on:click=move |_| {
let navigate = use_navigate();
navigate("/", Default::default());
}
>
2023-10-08 09:28:13 +08:00
2023-11-05 16:03:58 +08:00
"Thaw UI"
2023-11-02 21:29:45 +08:00
</div>
</Space>
2023-10-24 21:49:36 +08:00
<Space>
2023-11-08 17:27:01 +08:00
<AutoComplete value=search_value placeholder="Search" options=search_options/>
2023-11-08 11:02:38 +08:00
<Button
variant=ButtonVariant::Text
on:click=move |_| {
let navigate = use_navigate();
navigate("/guide/installation", Default::default());
}
>
"Guide"
</Button>
<Button
variant=ButtonVariant::Text
on:click=move |_| {
let navigate = use_navigate();
navigate("/components/button", Default::default());
}
>
"Components"
</Button>
2023-10-24 21:49:36 +08:00
<Button
variant=ButtonVariant::Text
on:click=on_theme
>
{move || theme_name.get()}
</Button>
<Button
variant=ButtonVariant::Text
2023-11-08 11:02:38 +08:00
icon=icondata::AiIcon::AiGithubOutlined
round=true
style="font-size: 22px; padding: 0px 6px;"
2023-10-24 21:49:36 +08:00
on:click=move |_| {
2023-11-05 16:03:58 +08:00
_ = window().open_with_url("http://github.com/thaw-ui/thaw");
2023-10-24 21:49:36 +08:00
}
>
</Button>
</Space>
2023-10-08 09:28:13 +08:00
2023-06-18 19:40:23 +08:00
</LayoutHeader>
}
}
2023-11-08 17:27:01 +08:00
fn gen_search_all_options() -> Vec<AutoCompleteOption> {
use crate::pages::{gen_guide_menu_data, gen_menu_data};
let mut options: Vec<_> = gen_menu_data()
.into_iter()
.map(|group| {
group.children.into_iter().map(|item| AutoCompleteOption {
value: format!("/components/{}", item.value),
label: item.label,
})
})
.flatten()
.collect();
options.extend(
gen_guide_menu_data()
.into_iter()
.map(|group| {
group.children.into_iter().map(|item| AutoCompleteOption {
value: format!("/guide/{}", item.value),
label: item.label,
})
})
.flatten(),
);
options
}