From dcded9af3efb278ea6df5b3729e9ad8ed3d314db Mon Sep 17 00:00:00 2001
From: Phillip Lang Martinez <philliplangmartinez@gmail.com>
Date: Tue, 9 Aug 2022 23:10:52 +0300
Subject: [PATCH] resuable button

---
 .../src/functional-components/my-button.js    | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 qortal-ui-core/src/functional-components/my-button.js

diff --git a/qortal-ui-core/src/functional-components/my-button.js b/qortal-ui-core/src/functional-components/my-button.js
new file mode 100644
index 00000000..e363fc8f
--- /dev/null
+++ b/qortal-ui-core/src/functional-components/my-button.js
@@ -0,0 +1,48 @@
+import { LitElement, html, css } from 'lit';
+import '@vaadin/button';
+import '@polymer/paper-spinner/paper-spinner-lite.js';
+
+export class MyButton extends LitElement {
+	static properties = {
+		onClick: { type: Function },
+		isLoading: { type: Boolean },
+		label: { type: String },
+	};
+
+	static styles = css`
+		vaadin-button {
+			height: 100%;
+			margin: 0;
+			cursor: pointer;
+
+			min-width: 80px;
+			background-color: #03a9f4;
+			color: white;
+		}
+
+		vaadin-button:hover {
+			opacity: 0.8;
+		}
+	`;
+
+	constructor() {
+		super();
+		this.onClick = () => {};
+		this.isLoading = false;
+		this.label = '';
+	}
+
+	render() {
+		return html`
+			<vaadin-button
+				?disabled="${this.isLoading}"
+				@click="${this.onClick}"
+			>
+				${this.isLoading === false
+					? html`${this.label}`
+					: html`<paper-spinner-lite active></paper-spinner-lite>`}
+			</vaadin-button>
+		`;
+	}
+}
+customElements.define('my-button', MyButton);