Button

use hydroxy_leptos::button::*;
use hydroxy_leptos::icon::IconName;
use leptos::prelude::*;

pub fn demo() -> AnyView {
    let (drafts, set_drafts) = signal(0);

    view! {
        <div style="display: grid; gap: var(--space-7);">
            // Variants. One primary or accent action per view.
            <div style="display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);">
                <Button>"Open the project"</Button>
                <Button
                    variant=ButtonVariant::Accent
                    icon_left=IconName::Plus
                    on_click=move |_| set_drafts.update(|n| *n += 1)
                >
                    "Draft summary"
                </Button>
                <Button variant=ButtonVariant::Secondary>"Export sources"</Button>
                <Button variant=ButtonVariant::Ghost icon_right=IconName::ArrowRight>"View all"</Button>
                <Button variant=ButtonVariant::Danger icon_left=IconName::Trash>"Delete project"</Button>
            </div>

            // Sizes: 32, 40 and 52px.
            <div style="display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);">
                <Button size=ButtonSize::Sm>"Book a demo"</Button>
                <Button size=ButtonSize::Md>"Book a demo"</Button>
                <Button size=ButtonSize::Lg>"Book a demo"</Button>
            </div>

            // Disabled, and stretched to the container.
            <Button variant=ButtonVariant::Secondary disabled=true full_width=true>
                "Share with workspace"
            </Button>

            <p style="margin: 0; font: var(--text-sm); color: var(--text-2);">"Drafts started: " {drafts}</p>
        </div>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::button::{Button, ButtonSize, ButtonVariant};
use hydroxy_dioxus::icon::IconName;

#[component]
pub fn ButtonDemo() -> Element {
    let mut drafts = use_signal(|| 0);

    rsx! {
        div { style: "display: grid; gap: var(--space-7);",
            // Variants. One primary or accent action per view.
            div { style: "display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);",
                Button { "Open the project" }
                Button {
                    variant: ButtonVariant::Accent,
                    icon_left: IconName::Plus,
                    on_click: move |_| drafts += 1,
                    "Draft summary"
                }
                Button { variant: ButtonVariant::Secondary, "Export sources" }
                Button { variant: ButtonVariant::Ghost, icon_right: IconName::ArrowRight, "View all" }
                Button { variant: ButtonVariant::Danger, icon_left: IconName::Trash, "Delete project" }
            }

            // Sizes: 32, 40 and 52px.
            div { style: "display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);",
                Button { size: ButtonSize::Sm, "Book a demo" }
                Button { size: ButtonSize::Md, "Book a demo" }
                Button { size: ButtonSize::Lg, "Book a demo" }
            }

            // Disabled, and stretched to the container.
            Button { variant: ButtonVariant::Secondary, disabled: true, full_width: true, "Share with workspace" }

            p { style: "margin: 0; font: var(--text-sm); color: var(--text-2);", "Drafts started: {drafts}" }
        }
    }
}