@use hyaenidae_toolkit::{Button, Card, Link, TextInput, templates::{button, button_group, card, card_body, code, link, text_input, statics::toolkit_css}};
@use super::{demo, section, statics::layout_css};
@()
Toolkit Demo
@:section("Links", "Link styles", {
@:demo("Link", "A link", &[
"@:link(&Link::current_tab(\"https://example.com\"), {",
" A Link",
"})",
], {
@:link(&Link::current_tab("https://example.com"), {
A Link
})
})
@:demo("Link", "A link that opens in a new tab", &[
"@:link(&Link::new_tab(\"https://example.com\"), {",
" A Link",
"})",
], {
@:link(&Link::new_tab("https://example.com"), {
A Link
})
})
})
@:section("Inputs", "Different input styles", {
@:demo("Text Input", "Default text input style", &[
"@:text_input(&TextInput::new(\"name\"))",
], {
@:text_input(&TextInput::new("name"))
})
@:demo("Text Input", "Text input with Placeholder", &[
"@:text_input(TextInput::new(\"name\")",
" .placeholder(\"Placeholder\")",
")",
], {
@:text_input(TextInput::new("name").placeholder("Placeholder"))
})
@:demo("Text Input", "Text input with Value", &[
"@:text_input(TextInput::new(\"name\")",
" .value(\"Value\")",
")",
], {
@:text_input(TextInput::new("name").value("Value"))
})
@:demo("Text Input", "Text input with Title", &[
"@:text_input(TextInput::new(\"name\")",
" .title(\"Title\")",
")",
], {
@:text_input(TextInput::new("name").title("Title"))
})
@:demo("Text Input", "Text area", &[
"@:text_input(TextInput::new(\"name\")",
" .textarea()",
" .placeholder(\"Placeholder\")",
" .title(\"Title\")",
")",
], {
@:text_input(TextInput::new("name").textarea().placeholder("Placeholder").title("Title"))
})
})
@:section("Buttons", "Different button styles", {
@:demo("Button", "Pimary button style", &[
r#"@:button(&Button::primary("Primary"))"#
], {
@:button(&Button::primary("Primary"))
})
@:demo("Button", "Pimary Outline button style", &[
"@:button(&Button::primary_outline(\"Primary Outline\"))",
], {
@:button(&Button::primary_outline("Primary Outline"))
})
@:demo("Button", "Outline button style", &[
"@:button(&Button::outline(\"Outline\"))",
], {
@:button(&Button::outline("Outline"))
})
@:demo("Button", "Secondary button style", &[
"@:button(&Button::secondary(\"Secondary\"))",
], {
@:button(&Button::secondary("Secondary"))
})
@:demo("Link Button", "This button is a link", &[
"@:button(Button::primary(\"Link\")",
" .href(\"https://example.com\")",
")",
], {
@:button(Button::primary("Link").href("https://example.com"))
})
@:demo("Link Button", "This button is a link that opens in a new tab", &[
"@:button(Button::primary(\"Link\")",
" .href(\"https://example.com\")",
" .new_tab()",
")",
], {
@:button(Button::primary("Link").href("https://example.com").new_tab())
})
@:demo("Form Button", "This button is a form that POSTs to an endpoint", &[
"@:button(Button::primary(\"Form\")",
" .form(\"/\")",
")",
], {
@:button(Button::primary("Form").form("/"))
})
})
@:section("Button Group", "Buttons styled together", {
@:demo("Group", "Button Group", &[
"@:button_group(&[",
" &Button::primary(\"Primary\"),",
" &Button::primary_outline(\"Primary Outline\"),",
" &Button::outline(\"Outline\"),",
" &Button::secondary(\"Secondary\"),",
"])",
], {
@:button_group(&[
&Button::primary("Primary"),
&Button::primary_outline("Primary Outline"),
&Button::outline("Outline"),
&Button::secondary("Secondary"),
])
})
})
@:section("Code", "Code snippets", {
@:demo("Code", "Insert code snippets", &[
"@:code({Hello, World})",
], {
@:code({Hello, World})
})
})
@:section("Card", "Card template", {
@:demo("Card", "Create a card with a Title and Body", &[
"@:card(&Card::new(), {",
" ",
"
Title
",
" ",
"}, {",
" @:card_body({",
" ",
" })",
"})",
], {
@:card(&Card::new(), {
Title
}, {
@:card_body({
})
})
})
@:demo("Card", "Create a full-width card with a Title and Body. This card loses its border radius and left & right borders when the viewport width is under 700px", &[
"@:card(&Card::full_width(), {",
" ",
"
Title
",
" ",
"}, {",
" @:card_body({",
" ",
" })",
"})",
], {
@:card(&Card::full_width(), {
Title
}, {
@:card_body({
})
})
})
})