Kbd

use hydroxy_leptos::kbd::Kbd;
use leptos::prelude::*;

pub fn demo() -> AnyView {
    view! {
        <div style="display: grid; gap: var(--space-4); font: var(--text-sm); color: var(--text-2);">
            <p style="margin: 0; display: flex; align-items: center; gap: var(--space-2);">
                "Search everything" <Kbd>"⌘"</Kbd> <Kbd>"K"</Kbd>
            </p>
            <p style="margin: 0; display: flex; align-items: center; gap: var(--space-2);">
                "New line" <Kbd>"Shift"</Kbd> <Kbd>"Enter"</Kbd>
            </p>
            <p style="margin: 0; display: flex; align-items: center; gap: var(--space-2);">
                "Close the panel" <Kbd>"Esc"</Kbd>
            </p>
        </div>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::kbd::Kbd;

#[component]
pub fn KbdDemo() -> Element {
    rsx! {
        div { style: "display: grid; gap: var(--space-4); font: var(--text-sm); color: var(--text-2);",
            p { style: "margin: 0; display: flex; align-items: center; gap: var(--space-2);",
                "Search everything"
                Kbd { "⌘" }
                Kbd { "K" }
            }
            p { style: "margin: 0; display: flex; align-items: center; gap: var(--space-2);",
                "New line"
                Kbd { "Shift" }
                Kbd { "Enter" }
            }
            p { style: "margin: 0; display: flex; align-items: center; gap: var(--space-2);",
                "Close the panel"
                Kbd { "Esc" }
            }
        }
    }
}