adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(demo): update Home

Browse source
This commit is contained in:
luoxiao 2024-08-26 00:14:02 +08:00
parent f408899eda
commit 7893d35239
1 changed files with 35 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
demo/src/pages/home.rs
View file

@ -1,3 +1,4 @@
use crate::components::SiteHeader;
use leptos::prelude::*;
use leptos_router::hooks::{use_navigate, use_query_map};
use thaw::*;
@ -12,31 +13,41 @@ pub fn Home() -> impl IntoView {
navigate(&path, Default::default());
}
view! {
<Layout
position=LayoutPosition::Absolute
content_style="display: flex; align-items: center; justify-content: center; flex-direction: column;"
>
<h1 style="font-size: 80px; line-height: 1;margin: 0 0 18px;">"Thaw UI"</h1>
<p>"An easy to use leptos component library"</p>
<Space>
<Button
appearance=ButtonAppearance::Primary
on_click=move |_| {
navigate("/components/button", Default::default());
}
>
"Read the docs"
</Button>
<Button
appearance=ButtonAppearance::Subtle
on_click=move |_| {
_ = window().open_with_url("http://github.com/thaw-ui/thaw");
}
>
<Layout position=LayoutPosition::Absolute>
<SiteHeader/>
<Layout
position=LayoutPosition::Absolute
attr:style="top: 64px"
>
<div style="width: 1100px; margin: calc(50vh - 200px) auto 0; display: flex">
<div style="width: 50%">
<h2 style="line-height: 64px; font-size: 56px; margin: 0 0 18px">"Thaw UI"</h2>
<p style="line-height: 36px; font-size: 24px">"An easy to use leptos component library"</p>
<Space>
<Button
appearance=ButtonAppearance::Primary
on_click=move |_| {
navigate("/components/button", Default::default());
}
>
"Read the docs"
</Button>
<Button
appearance=ButtonAppearance::Subtle
on_click=move |_| {
_ = window().open_with_url("http://github.com/thaw-ui/thaw");
}
>
"Github"
</Button>
</Space>
"Github"
</Button>
</Space>
</div>
<div style="width: 50%; text-align: center">
<img src="/logo.svg" style="width: 200px"/>
</div>
</div>
</Layout>
</Layout>
}
}