98 lines
1.7 KiB
Go
98 lines
1.7 KiB
Go
package ui
|
|
|
|
import (
|
|
"strconv"
|
|
|
|
. "maragu.dev/gomponents"
|
|
. "maragu.dev/gomponents/html"
|
|
)
|
|
|
|
// FORMS
|
|
func FormInput(children ...Node) Node {
|
|
return Input(
|
|
InlineStyle(`
|
|
$me {
|
|
background-color: $color(white);
|
|
padding: $2;
|
|
display: block;
|
|
width: 100%;
|
|
border: 0;
|
|
color: $color(neutral-900);
|
|
border-bottom: 1px solid $color(neutral-300);
|
|
box-shadow: var(--shadow-xs);
|
|
}
|
|
|
|
@media $sm {
|
|
$me {
|
|
font-size: var(--text-sm);
|
|
}
|
|
}
|
|
`),
|
|
Group(children),
|
|
)
|
|
}
|
|
|
|
func FormSelect(children ...Node) Node {
|
|
return Select(
|
|
InlineStyle(`
|
|
$me {
|
|
padding: $3;
|
|
background-color: $color(white);
|
|
display: block;
|
|
width: 100%;
|
|
border: 0;
|
|
color: $color(neutral-900);
|
|
border-bottom: 1px solid $color(neutral-300);
|
|
box-shadow: var(--shadow-xs);
|
|
}
|
|
@media $sm {
|
|
$me {
|
|
font-size: var(--text-sm);
|
|
}
|
|
}
|
|
`),
|
|
Group(children),
|
|
)
|
|
}
|
|
|
|
func FormTextarea(children ...Node) Node {
|
|
return Textarea(
|
|
InlineStyle(`
|
|
$me {
|
|
display: block;
|
|
padding: $3;
|
|
width: 100%;
|
|
font-size: var(--text-sm);
|
|
color: $color(neutral-900);
|
|
background-color: $color(white);
|
|
border-bottom: 1px solid $color(neutral-300);
|
|
box-shadow: var(--shadow-xs);
|
|
}
|
|
`),
|
|
Group(children),
|
|
)
|
|
}
|
|
|
|
func FormLabel(children ...Node) Node {
|
|
return Label(InlineStyle("$me { color: $color(neutral-900); font-size: var(--text-sm); } "), Group(children))
|
|
}
|
|
|
|
func FormCheck(children ...Node) Node {
|
|
return Input(
|
|
InlineStyle(`
|
|
$me {
|
|
margin-left: $3;
|
|
}
|
|
`),
|
|
Type("checkbox"),
|
|
Group(children),
|
|
)
|
|
}
|
|
|
|
func FormSlider(min int, max int, children ...Node) Node {
|
|
return Input(
|
|
Type("range"),
|
|
Min(strconv.Itoa(min)),
|
|
Max(strconv.Itoa(max)),
|
|
)
|
|
} |