Dialog

package showcase

import (
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/components/dialog"
	"github.com/templui/templui/components/form"
	"github.com/templui/templui/components/input"
)

templ DialogDefault() {
	@dialog.Dialog() {
		@dialog.Trigger() {
			@button.Button(button.Props{
				Variant: button.VariantOutline,
			}) {
				Open Dialog
			}
		}
		@dialog.Content(dialog.ContentProps{
			Class: "max-w-md",
		}) {
			@dialog.Header() {
				@dialog.Title() {
					Edit Profile
				}
				@dialog.Description() {
					Make changes to your profile here. Click save when you're done.
				}
			}
			<div class="space-y-4">
				<div class="space-y-2">
					@form.Label(form.LabelProps{For: "name"}) {
						Name
					}
					@input.Input(input.Props{
						ID:          "name",
						Placeholder: "Enter your name",
						Value:       "John Doe",
					})
				</div>
				<div class="space-y-2">
					@form.Label(form.LabelProps{For: "username"}) {
						Username
					}
					@input.Input(input.Props{
						ID:          "username",
						Placeholder: "Enter your username",
						Value:       "@johndoe",
					})
				</div>
			</div>
			@dialog.Footer() {
				@dialog.Close() {
					@button.Button(button.Props{
						Variant: button.VariantOutline,
					}) {
						Cancel
					}
				}
				@button.Button() {
					Save changes
				}
			}
		}
	}
}