Redmage/views/components/notification.templ

package components

const NotificationContainerID = "#notification-container"

templ NotificationContainer() {
	<div id="notification-container" class="toast max-xs:toast-top max-xs:toast-end z-50">
		{ children... }
	</div>
}

templ InfoNotication(messages ...string) {
	<div
		x-data="{ init() { setTimeout(() => $el.remove(), 5000) } }"
		onclick="this.remove()"
	>
		<div class="alert alert-info hover:bg-info-content transition-all">
			for i, message := range messages {
				<span>{ message }</span>
				if i != len(messages) - 1 {
					<br/>
				}
			}
		</div>
	</div>
}

templ ErrorNotication(messages ...string) {
	<div
		x-data="{ init() { setTimeout(() => $el.remove(), 5000) } }"
		onclick="this.remove()"
	>
		<div class="alert alert-error hover:bg-error-content transition-all">
			for i, message := range messages {
				<span>{ message }</span>
				if i != len(messages) - 1 {
					<br/>
				}
			}
		</div>
	</div>
}

templ SuccessNotification(messages ...string) {
	<div
		x-data="{ init() { setTimeout(() => $el.remove(), 5000) } }"
		onclick="this.remove()"
	>
		<div class="alert alert-success hover:bg-success-content transition-all">
			for i, message := range messages {
				<span>{ message }</span>
				if i != len(messages) - 1 {
					<br/>
				}
			}
		</div>
	</div>
}