gropdown-content-item.templ

package gropdown

const defaultExternalLinkIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="0.875em" height="0.875em" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>`

templ Item(label string, opts ...ItemOptions) {
	<li role="none">
		if buildItemOptions(label, opts).Href != "" {
			@linkItem(buildItemOptions(label, opts))
		} else {
			@buttonItem(buildItemOptions(label, opts))
		}
	</li>
}

templ linkItem(item *DropdownItem) {
	<a
		role="menuitem"
		class="gdd_content_item"
		href={ templ.SafeURL(item.Href) }
		if item.External {
			target="_blank"
			data-external="true"
		}
		{ item.Attrs... }
	>
		if item.Icon != "" {
			<div class="gdd_content_item_icon">
				@templ.Raw(item.Icon)
			</div>
		}
		{ item.Label }
		if item.External {
			@templ.Raw(defaultExternalLinkIcon)
		}
	</a>
}

templ buttonItem(item *DropdownItem) {
	<button role="menuitem" class="gdd_content_item" { item.Attrs... }>
		if item.Icon != "" {
			<div class="gdd_content_item_icon">
				@templ.Raw(item.Icon)
			</div>
		}
		{ item.Label }
	</button>
}