Card

package showcase

import (
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/input"
	"github.com/templui/templui/components/label"
	"github.com/templui/templui/components/selectbox"
)

templ CardDefault() {
	<div class="w-full max-w-sm">
		@card.Card() {
			@card.Header() {
				@card.Title() {
					Create Project
				}
				@card.Description() {
					Deploy your new project in one-click.
				}
			}
			@card.Content() {
				<div class="flex flex-col gap-4">
					<div class="w-full max-w-sm grid gap-2">
						@label.Label(label.Props{
							For: "name",
						}) {
							Name
						}
						@input.Input(input.Props{
							ID:          "name",
							Placeholder: "Enter project name",
						})
					</div>
					<div class="w-full max-w-sm grid gap-2">
						@label.Label(label.Props{
							For: "service",
						}) {
							Service
						}
						@selectbox.SelectBox() {
							@selectbox.Trigger(selectbox.TriggerProps{
								ID: "service",
							}) {
								@selectbox.Value(selectbox.ValueProps{
									Placeholder: "Select",
								})
							}
							@selectbox.Content() {
								@selectbox.Group() {
									@selectbox.Item(selectbox.ItemProps{
										Value: "postgres",
									}) {
										PostgreSQL
									}
									@selectbox.Item(selectbox.ItemProps{
										Value: "mysql",
									}) {
										MySQL
									}
									@selectbox.Item(selectbox.ItemProps{
										Value: "sqlite",
									}) {
										SQLite
									}
								}
							}
						}
					</div>
				</div>
			}
			@card.Footer(card.FooterProps{
				Class: "flex justify-between",
			}) {
				@button.Button(button.Props{
					Variant: button.VariantSecondary,
				}) {
					Cancel
				}
				@button.Button() {
					Deploy
				}
			}
		}
	</div>
}