146 lines
3.3 KiB
Swift
146 lines
3.3 KiB
Swift
import Elementary
|
|
import Routes
|
|
|
|
public struct PrimaryButton: HTML, Sendable {
|
|
let label: String
|
|
|
|
public init(label: String) {
|
|
self.label = label
|
|
}
|
|
|
|
public var content: some HTML<HTMLTag.button> {
|
|
button(
|
|
.class("""
|
|
font-bold py-2 px-4 transition-colors
|
|
bg-blue-500 enabled:hover:bg-blue-600
|
|
text-yellow-300
|
|
""")
|
|
) { label }
|
|
}
|
|
}
|
|
|
|
public struct SecondaryButton: HTML, Sendable {
|
|
let label: String
|
|
|
|
public init(label: String) {
|
|
self.label = label
|
|
}
|
|
|
|
public var content: some HTML<HTMLTag.button> {
|
|
button(
|
|
.class("""
|
|
font-bold py-2 px-4 transition-colors
|
|
bg-yellow-300 enabled:hover:bg-yellow-400
|
|
text-blue-600
|
|
""")
|
|
) { label }
|
|
}
|
|
}
|
|
|
|
public struct SubmitButton: HTML, Sendable {
|
|
let label: String
|
|
|
|
public init(label: String) {
|
|
self.label = label
|
|
}
|
|
|
|
public var content: some HTML<HTMLTag.button> {
|
|
button(
|
|
.type(.submit),
|
|
.class("""
|
|
w-full font-bold py-3 rounded-md transition-colors
|
|
bg-yellow-300 dark:bg-blue-500
|
|
hover:bg-yellow-400 hover:dark:bg-blue-600
|
|
text-blue-500 dark:text-yellow-300
|
|
""")
|
|
) { label }
|
|
}
|
|
}
|
|
|
|
public struct ResetButton: HTML, Sendable {
|
|
|
|
let label: String
|
|
|
|
public init(label: String = "Reset") {
|
|
self.label = label
|
|
}
|
|
|
|
public var content: some HTML<HTMLTag.button> {
|
|
button(.class("""
|
|
font-bold px-4 py-2 rounded-md transition-colors
|
|
bg-blue-500 dark:bg-yellow-300
|
|
hover:bg-blue-600 hover:dark:bg-yellow-400
|
|
text-yellow-300 dark:text-blue-500
|
|
""")) {
|
|
label
|
|
}
|
|
}
|
|
}
|
|
|
|
public struct Toggle: HTML {
|
|
|
|
let isOn: Bool
|
|
|
|
// Left hand side / 'on' label.
|
|
let onLabel: String
|
|
// Applied to the rhs when the toggle is consider 'off'.
|
|
let onAttributes: [HTMLAttribute<HTMLTag.button>]
|
|
|
|
// Right hand side / 'off' label.
|
|
let offLabel: String
|
|
// Applied to the left hand side when the toggle is consider 'on'.
|
|
let offAttributes: [HTMLAttribute<HTMLTag.button>]
|
|
|
|
public init(
|
|
isOn: Bool,
|
|
onLabel: String,
|
|
onAttributes: [HTMLAttribute<HTMLTag.button>],
|
|
offLabel: String,
|
|
offAttributes: [HTMLAttribute<HTMLTag.button>]
|
|
) {
|
|
self.isOn = isOn
|
|
self.onLabel = onLabel
|
|
self.onAttributes = onAttributes
|
|
self.offLabel = offLabel
|
|
self.offAttributes = offAttributes
|
|
}
|
|
|
|
public var content: some HTML<HTMLTag.div> {
|
|
div(.class("flex items-center gap-x-0")) {
|
|
switch isOn {
|
|
case true:
|
|
SecondaryButton(label: onLabel)
|
|
.attributes(.class("rounded-s-lg"), .disabled, .type(.button))
|
|
|
|
PrimaryButton(label: offLabel)
|
|
.attributes(contentsOf: offAttributes + [.class("rounded-e-lg"), .type(.button)])
|
|
|
|
case false:
|
|
PrimaryButton(label: onLabel)
|
|
.attributes(contentsOf: onAttributes + [.class("rounded-s-lg"), .type(.button)])
|
|
|
|
SecondaryButton(label: offLabel)
|
|
.attributes(.class("rounded-e-lg"), .disabled, .type(.button))
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
public extension Array where Element == HTMLAttribute<HTMLTag.button> {
|
|
|
|
static func hxDefaults(
|
|
_ attributes: HTMLAttribute<HTMLTag.button>...
|
|
) -> Self {
|
|
[
|
|
.hx.target("#content"),
|
|
.hx.pushURL(true)
|
|
] + attributes
|
|
}
|
|
|
|
static func hxDefaults(
|
|
get route: SiteRoute.View
|
|
) -> Self {
|
|
.hxDefaults(.hx.get(route: route))
|
|
}
|
|
}
|