adding banner

Author: grantnelson-wf

playground/internal/react/banner.go

@@ -0,0 +1,21 @@
+package react
+
+func BannerTitle(version string) *Element {
+	return CreateElement(bannerTitleComponent, Props{
+		`version`: version,
+	})
+}
+
+func bannerTitleComponent(props Props) *Element {
+	version := As[string](props, `version`)
+	return Span(Props{
+		`id`: `banner-title`,
+	},
+		`playground `,
+		Span(Props{
+			`id`: `banner-title-sub`,
+		},
+			`GopherJS (`, version, `)`,
+		),
+	)
+}

playground/internal/react/bannerTitle.go

@@ -0,0 +1,32 @@
+package react
+
+import "github.com/gopherjs/gopherjs/js"
+
+func FormatImportsControl(fmtImports bool, setFmtImports func(any)) *Element {
+	return CreateElement(formatImportsComponent, Props{
+		`fmtImports`:    fmtImports,
+		`setFmtImports`: setFmtImports,
+	})
+}
+
+func formatImportsComponent(props Props) *Element {
+	fmtImports := As[bool](props, `fmtImports`)
+	setFmtImports := AsSetter(props, `setFmtImports`)
+
+	onChange := func(e *js.Object) {
+		setFmtImports(e.Get(`target`).Get(`checked`).Bool())
+	}
+
+	return CreateElement(`label`, Props{
+		`id`:    `format-imports-label`,
+		`title`: `Rewrite imports on Format`,
+	},
+		CreateElement(`input`, Props{
+			`id`:       `format-imports`,
+			`type`:     `checkbox`,
+			`checked`:  fmtImports,
+			`onChange`: onChange,
+		}),
+		`Imports`,
+	)
+}

playground/internal/react/formatImportsControl.go

@@ -6,11 +6,43 @@ func Playground() *Element {
 
 func playgroundComponent() *Element {
 	code, setCode := UseState(``)
-	output, _ := UseState([]any{})
+	shareUrl, setShareUrl := UseState(``)
+	output, setOutput := UseState([]any{})
+	fmtImports, setFmtImports := UseState(true)
+
+	_ = setShareUrl
+	_ = setOutput
+
+	version := `vx.x.x`
+
+	onRunClick := func() {
+		print("Run clicked") // TODO(grantnelson-wf): Implement
+	}
+
+	onFormatClick := func() {
+		print("Format clicked", fmtImports) // TODO(grantnelson-wf): Implement
+	}
+
+	onShareClick := func() {
+		print("Share clicked") // TODO(grantnelson-wf): Implement
+	}
 
 	return Div(Props{
 		`id`: `playground`,
 	},
+		Div(Props{
+			`id`: `banner`,
+		},
+			BannerTitle(version),
+			Span(Props{
+				`id`: `controls`,
+			},
+				Button(`run-button`, `Run`, nil, onRunClick),
+				Button(`format-button`, `Format`, nil, onFormatClick),
+				FormatImportsControl(fmtImports, setFmtImports),
+				ShareUrlControl(shareUrl, onShareClick),
+			),
+		),
 		CodeBox(code, setCode),
 		OutputBox(output),
 	)

playground/internal/react/playground.go

@@ -0,0 +1,48 @@
+package react
+
+import "github.com/gopherjs/gopherjs/js"
+
+func ShareUrlControl(shareUrl string, onShare func()) *Element {
+	return CreateElement(shareUrlComponent, Props{
+		`shareUrl`: shareUrl,
+		`onShare`:  onShare,
+	})
+}
+
+func shareUrlComponent(props Props) *Element {
+	shareUrl := As[string](props, `shareUrl`)
+	onShare := AsFunc(props, `onShare`)
+	shareUrlRef := UseRef()
+
+	UseEffect(func() {
+		if len(shareUrl) > 0 {
+			shareUrlRef.Call(`focus`)
+		}
+	}, []any{shareUrl, shareUrlRef})
+
+	onShareUrlFocus := func(e *js.Object) {
+		e.Get(`target`).Call(`select`)
+	}
+
+	onShareClick := func() {
+		onShare()
+	}
+
+	className := `share-url-hidden`
+	if len(shareUrl) > 0 {
+		className = `share-url-show`
+	}
+
+	return Fragment(
+		Button(`share-button`, `Share`, nil, onShareClick),
+		CreateElement(`input`, Props{
+			`id`:        `share-url`,
+			`type`:      `text`,
+			`className`: className,
+			`ref`:       shareUrlRef,
+			`value`:     shareUrl,
+			`readOnly`:  true,
+			`onFocus`:   onShareUrlFocus,
+		}),
+	)
+}