Files
knifer/frontend/src/navbar.rs
2024-09-16 23:20:55 +02:00

90 lines
2.3 KiB
Rust

use leptos::*;
use leptos_router::A;
use crate::DemoUploadStatus;
#[leptos::component]
fn steam_login(height: &'static str, width: &'static str) -> impl leptos::IntoView {
let user_status = create_resource(
|| (),
|_| async move {
let res = reqwasm::http::Request::get("/api/user/status")
.send()
.await
.unwrap();
res.json::<common::UserStatus>().await.map_err(|e| ())
},
);
let tmp = move || {
match user_status.get() {
Some(Ok(user)) =>
view! {
<p>{user.name}</p>
}.into_view(),
_ =>
view! {
<a href="/api/steam/login" rel="external">
<img src="https://community.akamai.steamstatic.com/public/images/signinthroughsteam/sits_01.png" alt="Steam Login" style=format!("height: {height}; width: {width}") />
</a>
}.into_view(),
}
};
view! {
{ tmp }
}
}
#[leptos::component]
pub fn top_bar(update_demo_visible: WriteSignal<DemoUploadStatus>) -> impl leptos::IntoView {
let style = stylers::style! {
"TopBar",
.bar {
width: 100%;
height: 4vh;
padding-top: 0.5vh;
padding-bottom: 0.5vh;
background-color: #28282f;
color: #d5d5d5;
display: grid;
grid-template-columns: 15vw auto 10vw calc(4vh * (180/35) + 20px);
}
.elem {
display: inline-block;
margin-top: auto;
margin-bottom: auto;
}
.logo {
color: #d5d5d5;
width: 15vw;
font-size: 24px;
padding: 0px;
margin: 0px;
margin-left: 1vw;
}
};
view! {class = style,
<div class="bar">
<A href="/">
<p class="logo">Knifer</p>
</A>
<div class="elem" style="grid-column-start: 3">
<button on:click=move |_| update_demo_visible(DemoUploadStatus::Shown)>
Upload Demo
</button>
</div>
<div class="elem" style="grid-column-start: 4">
<SteamLogin height="4vh" width="auto" />
</div>
</div>
}
}