Tabs

package showcase

import (
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/card"
	"github.com/templui/templui/internal/components/input"
	"github.com/templui/templui/internal/components/tabs"
)

templ TabsDefault() {
	@tabs.Tabs(tabs.Props{
		ID: "account-tabs",
	}) {
		@tabs.List(tabs.ListProps{
			Class: "w-full max-w-xs",
		}) {
			@tabs.Trigger(tabs.TriggerProps{
				Value:    "account",
				IsActive: true,
			}) {
				Account
			}
			@tabs.Trigger(tabs.TriggerProps{
				Value: "password",
			}) {
				Password
			}
		}
		<div class="w-full max-w-xs mt-2">
			@tabs.Content(tabs.ContentProps{
				Value:    "account",
				IsActive: true,
			}) {
				@AccountTab()
			}
			@tabs.Content(tabs.ContentProps{
				Value: "password",
			}) {
				@PasswordTab()
			}
		</div>
	}
}

templ AccountTab() {
	@card.Card() {
		@card.Header() {
			@card.Title() {
				Account 
			}
			@card.Description() {
				Make changes to your account here. Click save when you are done.
			}
		}
		@card.Content() {
			<div class="flex flex-col gap-4">
				@input.Input(input.Props{
					Type:        input.TypeText,
					Placeholder: "Name",
					ID:          "name",
					Value:       "John Doe",
				})
				@input.Input(input.Props{
					Type:        input.TypeEmail,
					Placeholder: "Email",
					ID:          "email",
					Value:       "[email protected]",
				})
			</div>
		}
		@card.Footer() {
			@button.Button() {
				Save changes
			}
		}
	}
}

templ PasswordTab() {
	@card.Card() {
		@card.Header() {
			@card.Title() {
				Password 
			}
			@card.Description() {
				Change your password here. After saving, you will be logged out.
			}
		}
		@card.Content() {
			<div class="flex flex-col gap-4">
				@input.Input(input.Props{
					Type:        input.TypePassword,
					Placeholder: "Current Password",
					ID:          "current_password",
				})
				@input.Input(input.Props{
					Type:        input.TypePassword,
					Placeholder: "New Password",
					ID:          "new_password",
				})
			</div>
		}
		@card.Footer() {
			@button.Button() {
				Save password
			}
		}
	}
}