Redmage/views/subredditsview/addview/addview.templ

92 lines
2.5 KiB
Plaintext
Raw Normal View History

package addview
import "github.com/tigorlazuardi/redmage/views"
import "github.com/tigorlazuardi/redmage/views/components"
import "github.com/tigorlazuardi/redmage/views/utils"
templ Addview(c *views.Context) {
@components.Doctype() {
@components.Head(c, components.HeadTitle("Redmage - Subreddits"))
@components.Body(c) {
@AddviewContent(c)
@components.NotificationContainer()
}
}
}
templ AddviewContent(c *views.Context) {
<main class="prose min-w-full">
@components.Container() {
<h1>Add Subreddit</h1>
<div class="divider"></div>
<form hx-post="/htmx/subreddit/add" class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<label id="subreddit-input" class="form-control w-full">
@SubredditInputForm(SubredditInputData{})
</label>
</form>
}
</main>
}
type SubredditInputData struct {
Value string
Error string
Valid bool
}
templ SubredditInputForm(data SubredditInputData) {
<div class="label">
<span
class={ utils.CX(map[string]bool{
"label-text": true,
"text-error": data.Error != "",
"text-success": data.Valid,
"text-base": true,
}) }
>Subreddit Name</span>
</div>
@subredditInputField("/htmx/subreddits/check", data)
<div class="label">
<span
class={ utils.CX(map[string]bool{
"label-text": true,
"text-error": data.Error != "",
"text-success": data.Valid,
"min-h-[1rem]": true,
}) }
>
if data.Valid {
Subreddit / User target is valid
} else {
{ data.Error }
}
</span>
</div>
}
templ subredditInputField(target string, data SubredditInputData) {
<input
type="text"
id="name"
name="name"
hx-post={ target }
hx-target="#subreddit-input"
hx-target-4xx="#subreddit-input"
hx-trigger="keyup changed delay:1s, on-demand"
hx-target-5x={ components.NotificationContainerID }
value={ data.Value }
placeholder="e.g. 'wallpaper' or 'EarthPorn'"
class={ utils.CX(map[string]bool{
"input": true,
"input-bordered": true,
"input-error": data.Error != "",
"text-error": data.Error != "",
"input-success": data.Valid,
"text-success": data.Valid,
}) }
required
data-error={ data.Error }
hx-on::load="this.setCustomValidity(this.getAttribute('data-error'))"
/>
}