adam/cards
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

pull out header and footer

Browse source
This commit is contained in:
Adam 2024-09-10 02:30:16 -04:00
parent fb586bb362
commit 4df5792be8
4 changed files with 80 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
client/src/components/footer.rs Normal file
View file

@ -0,0 +1,22 @@
use leptos::prelude::*;
use thaw::*;
#[component]
pub fn Footer() -> impl IntoView {
view! {
<div
class="fixed sm:static bottom-0 left-0 w-full sm:w-auto"
style="background-color: var(--colorNeutralBackground4);"
>
<Divider />
<div class="m-2">
<Link class="p-2" href="https://git.doordesk.net/adam/cards/">
"About"
</Link>
<Link class="p-2" href="mailto:adam@doordesk.net">
"Contact"
</Link>
</div>
</div>
}
}

50
client/src/components/header.rs Normal file
View file

@ -0,0 +1,50 @@
use crate::components::auth::*;
use crate::components::theme_button::*;
use leptos::prelude::*;
use thaw::*;
#[component]
pub fn Header() -> impl IntoView {
let selected_value = expect_context::<RwSignal<String>>();
view! {
<div class="flex flex-wrap justify-between">
<h1 class="text-4xl sm:text-6xl md:text-7xl lg:text-8xl tracking-tighter">
"Cards For Humanity"
</h1>
<ThemeButton />
</div>
<div class="flex justify-between">
<TabList selected_value>
<Tab value="home">
<Button
appearance=ButtonAppearance::Transparent
icon=icondata::BiHomeAlt2Regular
/>
</Tab>
<Tab value="browser">
<Button
appearance=ButtonAppearance::Transparent
icon=icondata::RiMenuSearchSystemLine
/>
</Tab>
<Tab value="game">
<Button appearance=ButtonAppearance::Transparent icon=icondata::LuGamepad />
</Tab>
<Tab value="chat">
<Button
appearance=ButtonAppearance::Transparent
icon=icondata::BsChatLeftText
/>
</Tab>
<Tab value="debug">
<Button appearance=ButtonAppearance::Transparent icon=icondata::AiBugOutlined />
</Tab>
</TabList>
<div class="mt-2">
<Auth />
</div>
</div>
<Divider />
}
}

2
client/src/components/mod.rs
View file

@ -2,6 +2,8 @@ pub mod auth;
pub mod browser; pub mod browser;
pub mod chat; pub mod chat;
pub mod debug; pub mod debug;
pub mod footer;
pub mod game; pub mod game;
pub mod header;
pub mod theme_button; pub mod theme_button;
pub mod websocket; pub mod websocket;

72
client/src/pages/home.rs
View file

@ -1,9 +1,9 @@
use crate::components::auth::*;
use crate::components::browser::*; use crate::components::browser::*;
use crate::components::chat::*; use crate::components::chat::*;
use crate::components::debug::*; use crate::components::debug::*;
use crate::components::footer::*;
use crate::components::game::*; use crate::components::game::*;
use crate::components::theme_button::*; use crate::components::header::*;
use crate::components::websocket::*; use crate::components::websocket::*;
use leptos::prelude::*; use leptos::prelude::*;
use thaw::*; use thaw::*;
@ -12,15 +12,14 @@ use thaw::*;
#[component] #[component]
pub fn Home() -> impl IntoView { pub fn Home() -> impl IntoView {
let modal = RwSignal::new(false); let modal = RwSignal::new(false);
let selected_value = RwSignal::new("home".to_string());
provide_context(selected_value);
// Suppress modal during development // Suppress modal during development
if !cfg!(debug_assertions) { if !cfg!(debug_assertions) {
modal.set(true); modal.set(true);
}; };
let selected_value = RwSignal::new("home".to_string());
provide_context(selected_value);
view! { view! {
<ErrorBoundary fallback=|errors| { <ErrorBoundary fallback=|errors| {
view! { view! {
@ -47,52 +46,7 @@ pub fn Home() -> impl IntoView {
class="p-1 sm:p-5 sm:rounded-2xl sm:shadow-black sm:shadow-lg min-h-screen sm:min-h-0" class="p-1 sm:p-5 sm:rounded-2xl sm:shadow-black sm:shadow-lg min-h-screen sm:min-h-0"
style="background-color: var(--colorNeutralBackground4);" style="background-color: var(--colorNeutralBackground4);"
> >
// Header <Header />
<div class="flex flex-wrap justify-between">
<h1 class="text-4xl sm:text-6xl md:text-7xl lg:text-8xl tracking-tighter">
"Cards For Humanity"
</h1>
<ThemeButton />
</div>
<div class="flex justify-between">
<TabList selected_value>
<Tab value="home">
<Button
appearance=ButtonAppearance::Transparent
icon=icondata::BiHomeAlt2Regular
/>
</Tab>
<Tab value="browser">
<Button
appearance=ButtonAppearance::Transparent
icon=icondata::RiMenuSearchSystemLine
/>
</Tab>
<Tab value="game">
<Button
appearance=ButtonAppearance::Transparent
icon=icondata::LuGamepad
/>
</Tab>
<Tab value="chat">
<Button
appearance=ButtonAppearance::Transparent
icon=icondata::BsChatLeftText
/>
</Tab>
<Tab value="debug">
<Button
appearance=ButtonAppearance::Transparent
icon=icondata::AiBugOutlined
/>
</Tab>
</TabList>
<div class="mt-2">
<Auth />
</div>
</div>
<Divider />
<Show when=move || selected_value() == "home".to_string()> <Show when=move || selected_value() == "home".to_string()>
<div class="p-4"> <div class="p-4">
<h2 class="text-2xl">"Hey!"</h2> <h2 class="text-2xl">"Hey!"</h2>
@ -121,21 +75,7 @@ pub fn Home() -> impl IntoView {
<Debug /> <Debug />
</Show> </Show>
// Footer <Footer />
<div
class="fixed sm:static bottom-0 left-0 w-full sm:w-auto"
style="background-color: var(--colorNeutralBackground4);"
>
<Divider />
<div class="m-2">
<Link class="p-2" href="https://git.doordesk.net/adam/cards/">
"About"
</Link>
<Link class="p-2" href="mailto:adam@doordesk.net">
"Contact"
</Link>
</div>
</div>
</div> </div>
</div> </div>
</ErrorBoundary> </ErrorBoundary>