2020-12-16 02:40:41 +00:00
@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};
@()
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
< title > Toolkit Demo< / title >
< style >
@Html(String::from_utf8_lossy(toolkit_css.content))
@Html(String::from_utf8_lossy(layout_css.content))
< / style >
< / head >
< body >
@: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())
})
2020-12-16 04:50:00 +00:00
@:demo("Form Button", "This button is a form that POSTs to an endpoint", & [
"@:button(Button::primary(\"Form\")",
" .form(\"/\")",
")",
], {
@:button(Button::primary("Form").form("/"))
})
2020-12-16 02:40:41 +00:00
})
@: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(), {",
" < div > ",
" < h3 > Title< / h3 > ",
" < / div > ",
"}, {",
" @:card_body({",
" < div > ",
" < p > Body< / p > ",
" < / div > ",
" })",
"})",
], {
@:card(& Card::new(), {
< div >
< h3 > Title< / h3 >
< / div >
}, {
@:card_body({
< div >
< p > Body< p >
< / div >
})
})
})
@: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", & [
2020-12-16 21:43:43 +00:00
"@:card(& Card::full_width(), {",
2020-12-16 02:40:41 +00:00
" < div > ",
" < h3 > Title< / h3 > ",
" < / div > ",
"}, {",
" @:card_body({",
" < div > ",
" < p > Body< / p > ",
" < / div > ",
" })",
"})",
], {
2020-12-16 21:43:43 +00:00
@:card(& Card::full_width(), {
2020-12-16 02:40:41 +00:00
< div >
< h3 > Title< / h3 >
< / div >
}, {
@:card_body({
< div >
< p > Body< p >
< / div >
})
})
})
})
< / body >
< / html >