svgbtn.gno

  1// Package svgbtn provides utilities for generating SVG-styled buttons as Markdown image links.
  2//
  3// Buttons are rendered as SVG images with customizable size, colors, labels, and links.
  4// This package includes preconfigured styles such as Primary, Danger, Success, Small, Wide,
  5// Text-like, and Icon buttons, as well as a factory method for dynamic button creation.
  6//
  7// Example usage:
  8//
  9//	func Render(_ string) string {
 10//		btn := svgbtn.PrimaryButton(120, 40, "Click Me", "https://example.com")
 11//		return btn
 12//	}
 13//
 14// See more examples at gno.land/r/leon:buttons
 15//
 16// All buttons are returned as Markdown-compatible strings: [svg_data](link).
 17package svgbtn
 18
 19import (
 20	"gno.land/p/demo/svg"
 21	"gno.land/p/nt/ufmt"
 22)
 23
 24// Button creates a base SVG button with given size, colors, label, and link.
 25// - `width`, `height`: size in pixels
 26// - `btnColor`: background color (e.g. "#007BFF")
 27// - `textColor`: label color (e.g. "#FFFFFF")
 28// - `text`: visible button label
 29// - `link`: URL to wrap the image in markdown-style [svg](link)
 30func Button(width, height int, btnColor, textColor, text, link string) string {
 31	return ButtonWithRadius(width, height, height/5, btnColor, textColor, text, link)
 32}
 33
 34// ButtonWithRadius creates a base SVG button with custom border radius.
 35// - `width`, `height`: size in pixels
 36// - `radius`: border radius in pixels
 37// - `btnColor`: background color (e.g. "#007BFF")
 38// - `textColor`: label color (e.g. "#FFFFFF")
 39// - `text`: visible button label
 40// - `link`: URL to wrap the image in markdown-style [svg](link)
 41func ButtonWithRadius(width, height, radius int, btnColor, textColor, text, link string) string {
 42	canvas := svg.NewCanvas(width, height).
 43		WithViewBox(0, 0, width, height).
 44		AddStyle("text", "font-family:sans-serif;font-size:14px;text-anchor:middle;dominant-baseline:middle;")
 45
 46	bg := svg.NewRectangle(0, 0, width, height, btnColor)
 47	bg.RX = radius
 48	bg.RY = radius
 49
 50	label := svg.NewText(width/2, height/2, text, textColor)
 51
 52	canvas.Append(bg, label)
 53
 54	return ufmt.Sprintf("[%s](%s)", canvas.Render(text), link)
 55}
 56
 57// PrimaryButton renders a blue button with white text.
 58func PrimaryButton(width, height int, text, link string) string {
 59	return Button(width, height, "#007BFF", "#ffffff", text, link)
 60}
 61
 62// DangerButton renders a red button with white text.
 63func DangerButton(width, height int, text, link string) string {
 64	return Button(width, height, "#DC3545", "#ffffff", text, link)
 65}
 66
 67// SuccessButton renders a green button with white text.
 68func SuccessButton(width, height int, text, link string) string {
 69	return Button(width, height, "#28A745", "#ffffff", text, link)
 70}
 71
 72// SmallButton renders a compact gray button with white text.
 73func SmallButton(width, height int, text, link string) string {
 74	return Button(width, height, "#6C757D", "#ffffff", text, link)
 75}
 76
 77// WideButton renders a wider cyan button with white text.
 78func WideButton(width, height int, text, link string) string {
 79	return Button(width, height, "#17A2B8", "#ffffff", text, link)
 80}
 81
 82// TextButton renders a white button with colored text, like a hyperlink.
 83func TextButton(width, height int, text, link string) string {
 84	return Button(width, height, "#ffffff", "#007BFF", text, link)
 85}
 86
 87// IconButton renders a square button with an icon character (e.g. emoji).
 88func IconButton(width, height int, icon, link string) string {
 89	return Button(width, height, "#E0E0E0", "#000000", icon, link)
 90}
 91
 92// ButtonFactory provides a named-style constructor for buttons.
 93// Supported kinds: "primary", "danger", "success", "small", "wide", "text", "icon".
 94func ButtonFactory(kind string, width, height int, text, link string) string {
 95	switch kind {
 96	case "primary":
 97		return PrimaryButton(width, height, text, link)
 98	case "danger":
 99		return DangerButton(width, height, text, link)
100	case "success":
101		return SuccessButton(width, height, text, link)
102	case "small":
103		return SmallButton(width, height, text, link)
104	case "wide":
105		return WideButton(width, height, text, link)
106	case "text":
107		return TextButton(width, height, text, link)
108	case "icon":
109		return IconButton(width, height, text, link)
110	default:
111		return PrimaryButton(width, height, text, link)
112	}
113}