cards/client/src/pages/home.rs

use crate::components::auth::*;
use crate::components::browser::*;
use crate::components::chat::*;
use crate::components::debug::*;
use crate::components::game::*;
use crate::components::theme_button::*;
use crate::components::websocket::*;
use leptos::prelude::*;
use thaw::*;

/// Default Home Page
#[component]
pub fn Home() -> impl IntoView {
    let modal = RwSignal::new(false);

    // Suppress modal during development
    if !cfg!(debug_assertions) {
        modal.set(true);
    };

    let selected_value = RwSignal::new("home".to_string());
    provide_context(selected_value);

    view! {
        <ErrorBoundary fallback=|errors| {
            view! {
                <h1>"Uh oh! Something went wrong!"</h1>

                <p>"Errors: "</p>
                // Render a list of errors as strings - good for development purposes
                <ul>
                    {move || {
                        errors
                            .get()
                            .into_iter()
                            .map(|(_, e)| view! { <li>{e.to_string()}</li> })
                            .collect_view()
                    }}

                </ul>
            }
        }>
            <Websocket />

            <div class="container m-auto relative">
                <div
                    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);"
                >
                    // 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()>
                        <div class="p-4">
                            <h2 class="text-2xl">"Hey!"</h2>
                            <p class="indent-4 text-pretty my-3">
                                {"Welcome! Thank you for helping me test this. Please let me know about any issues you may come across. Chances are you already know how to contact me but in case you don't you can email me at "}
                                <Link href="mailto:adam@doordesk.net">adam@doordesk.net</Link>
                                {". The server may go down from time to time as bugs are found and as I add updates. If you manage to crash the server or notice it down for a long time please tell me about it."}
                            </p>
                            <p>Have fun!</p>
                        </div>
                    </Show>

                    <Show when=move || selected_value() == "browser".to_string()>
                        <Browser />
                    </Show>

                    <Show when=move || selected_value() == "game".to_string()>
                        <Game />
                    </Show>

                    <Show when=move || selected_value() == "chat".to_string()>
                        <Chat />
                    </Show>

                    <Show when=move || selected_value() == "debug".to_string()>
                        <Debug />
                    </Show>

                    // 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>
        </ErrorBoundary>
    }
}