xtablo-source/backend/internal/web/ui/icon_button.templ

package ui

type IconButtonProps struct {
	Label   string
	Icon    string
	Variant IconButtonVariant
	Tone    IconButtonTone
	Type    string
	Attrs   templ.Attributes
}

templ IconButton(props IconButtonProps) {
	<button type={ buttonType(props.Type) } class={ IconButtonClass(props.Variant, props.Tone) } aria-label={ props.Label } { props.Attrs... }>
		@UIIcon(props.Icon)
	</button>
}

templ UIIcon(kind string) {
	switch kind {
		case "plus":
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<path d="M5 12h14"></path>
				<path d="M12 5v14"></path>
			</svg>
		case "grid3x3":
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<rect width="18" height="18" x="3" y="3" rx="2"></rect>
				<path d="M3 9h18"></path>
				<path d="M3 15h18"></path>
				<path d="M9 3v18"></path>
				<path d="M15 3v18"></path>
			</svg>
		case "list":
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<path d="M3 12h.01"></path>
				<path d="M3 18h.01"></path>
				<path d="M3 6h.01"></path>
				<path d="M8 12h13"></path>
				<path d="M8 18h13"></path>
				<path d="M8 6h13"></path>
			</svg>
		case "filter":
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
			</svg>
		case "search":
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<circle cx="11" cy="11" r="8"></circle>
				<path d="m21 21-4.3-4.3"></path>
			</svg>
		case "calendar":
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<path d="M8 2v4"></path>
				<path d="M16 2v4"></path>
				<rect width="18" height="18" x="3" y="4" rx="2"></rect>
				<path d="M3 10h18"></path>
			</svg>
		case "pencil":
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<path d="M12 20h9"></path>
				<path d="M16.5 3.5a2.12 2.12 0 1 1 3 3L7 19l-4 1 1-4Z"></path>
			</svg>
		case "trash":
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2 w-4 h-4" aria-hidden="true">
				<path d="M3 6h18"></path>
				<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
				<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
				<line x1="10" x2="10" y1="11" y2="17"></line>
				<line x1="14" x2="14" y1="11" y2="17"></line>
			</svg>
		case "download":
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
				<polyline points="7 10 12 15 17 10"></polyline>
				<line x1="12" x2="12" y1="15" y2="3"></line>
			</svg>
		case "chat":
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path>
			</svg>
		default:
			<span aria-hidden="true">{ kind }</span>
	}
}