47b8386844
This is found in the components domain. Make sure only HTMX routes call it. Although, I think I put this into the page handlers WHICH IS WRONG. However, it does work, ish. But it does not load into the DOM properly. But it seems to display just fine.
59 lines
1.9 KiB
Plaintext
59 lines
1.9 KiB
Plaintext
package components
|
|
|
|
import "github.com/gin-gonic/gin"
|
|
|
|
templ errorIcon() {
|
|
<svg class="h-6 text-red-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M12 16.99V17M12 7V14M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></path>
|
|
</svg>
|
|
}
|
|
|
|
templ closeButton() {
|
|
<button
|
|
onclick="hideError();"
|
|
class="text-red-500 ml-auto hover:bg-red-200 p-1 rounded-sm transition-all duration-300 cursor-pointer"
|
|
>
|
|
<svg class="h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M19.207 6.207a1 1 0 0 0-1.414-1.414L12 10.586 6.207 4.793a1 1 0 0 0-1.414 1.414L10.586 12l-5.793 5.793a1 1 0 1 0 1.414 1.414L12 13.414l5.793 5.793a1 1 0 0 0 1.414-1.414L13.414 12l5.793-5.793z"
|
|
fill="currentColor"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
}
|
|
|
|
templ errorBanner(message string) {
|
|
<div
|
|
id="error-toast"
|
|
hx-swap-oob="outerHTML"
|
|
class="fixed z-20 border border-red-500 rounded-sm right-0 top-0 m-4 p-4 bg-red-100 shadow shadow-red-200 transition-all duration-300 text-sm md:w-1/3"
|
|
>
|
|
<div class="flex items-center gap-x-2 pb-1">
|
|
@errorIcon()
|
|
<h1 class="text-red-500 font-semibold">Error</h1>
|
|
@closeButton()
|
|
</div>
|
|
<div class="ml-8">
|
|
<p class="text-red-500 text-sm">
|
|
{ message }
|
|
</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
// RenderErrorBanner renders the error banner. However, this function must ONLY be called by an
|
|
// HTMX route. Otherwise, there is no promise it will work (may result in undefined behavior).
|
|
// Just writes a piece of content to the response.
|
|
func RenderErrorBanner(ctx *gin.Context, message string) {
|
|
ctx.Writer.Header().Set("Content-Type", "text/html")
|
|
errorBanner(message).Render(ctx.Request.Context(), ctx.Writer)
|
|
}
|