svgbtn.gno
3.58 Kb ยท 102 lines
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 canvas := svg.NewCanvas(width, height).
32 WithViewBox(0, 0, width, height).
33 AddStyle("text", "font-family:sans-serif;font-size:14px;text-anchor:middle;dominant-baseline:middle;")
34
35 bg := svg.NewRectangle(0, 0, width, height, btnColor)
36 bg.RX = height / 5
37 bg.RY = height / 5
38
39 label := svg.NewText(width/2, height/2, text, textColor)
40
41 canvas.Append(bg, label)
42
43 return ufmt.Sprintf("[%s](%s)", canvas.Render(text), link)
44}
45
46// PrimaryButton renders a blue button with white text.
47func PrimaryButton(width, height int, text, link string) string {
48 return Button(width, height, "#007BFF", "#ffffff", text, link)
49}
50
51// DangerButton renders a red button with white text.
52func DangerButton(width, height int, text, link string) string {
53 return Button(width, height, "#DC3545", "#ffffff", text, link)
54}
55
56// SuccessButton renders a green button with white text.
57func SuccessButton(width, height int, text, link string) string {
58 return Button(width, height, "#28A745", "#ffffff", text, link)
59}
60
61// SmallButton renders a compact gray button with white text.
62func SmallButton(width, height int, text, link string) string {
63 return Button(width, height, "#6C757D", "#ffffff", text, link)
64}
65
66// WideButton renders a wider cyan button with white text.
67func WideButton(width, height int, text, link string) string {
68 return Button(width, height, "#17A2B8", "#ffffff", text, link)
69}
70
71// TextButton renders a white button with colored text, like a hyperlink.
72func TextButton(width, height int, text, link string) string {
73 return Button(width, height, "#ffffff", "#007BFF", text, link)
74}
75
76// IconButton renders a square button with an icon character (e.g. emoji).
77func IconButton(width, height int, icon, link string) string {
78 return Button(width, height, "#E0E0E0", "#000000", icon, link)
79}
80
81// ButtonFactory provides a named-style constructor for buttons.
82// Supported kinds: "primary", "danger", "success", "small", "wide", "text", "icon".
83func ButtonFactory(kind string, width, height int, text, link string) string {
84 switch kind {
85 case "primary":
86 return PrimaryButton(width, height, text, link)
87 case "danger":
88 return DangerButton(width, height, text, link)
89 case "success":
90 return SuccessButton(width, height, text, link)
91 case "small":
92 return SmallButton(width, height, text, link)
93 case "wide":
94 return WideButton(width, height, text, link)
95 case "text":
96 return TextButton(width, height, text, link)
97 case "icon":
98 return IconButton(width, height, text, link)
99 default:
100 return PrimaryButton(width, height, text, link)
101 }
102}