feat: stash tab: add copy button for JSON of the tab

shonya3 · Aug 10, 2024 · df3b926 · df3b926
1 parent c5c6d11
commit df3b926
Showing 1 changed file with 18 additions and 1 deletion.
diff --git a/packages/wc/src/wc/stashes/e-stash-tab-container.ts b/packages/wc/src/wc/stashes/e-stash-tab-container.ts
@@ -3,6 +3,7 @@ import 'poe-custom-elements/stash-tab.js';
 import '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
 import '@shoelace-style/shoelace/dist/components/button/button.js';
 import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
+import '@shoelace-style/shoelace/dist/components/copy-button/copy-button.js';
 import { TabBadgeElement } from './tab-badge';
 
 import { LitElement, html, css, TemplateResult } from 'lit';
@@ -34,7 +35,17 @@ export class StashTabContainerElement extends LitElement {
 
 	protected render(): TemplateResult {
 		return html`<header class="header">
-				${this.badge ? html`<wc-tab-badge as="button" .tab=${this.badge}></wc-tab-badge>` : null}
+				<div class="badge-and-copy">
+					${this.badge ? html`<wc-tab-badge as="button" .tab=${this.badge}></wc-tab-badge>` : null}
+					${this.tab
+						? html`<sl-copy-button
+								.value=${JSON.stringify(this.tab, null, 4)}
+								.copyLabel=${`Click to copy JSON of the tab`}
+								.successLabel=${`You copied JSON of the tab`}
+								.errorLabel=${`Whoops, your browser doesn't support this!`}
+						  ></sl-copy-button>`
+						: null}
+				</div>
 				${this.status === 'complete'
 					? html`<sl-button @click=${this.#emitExtractCards}>Extract cards sample</sl-button>`
 					: null}
@@ -87,6 +98,12 @@ export class StashTabContainerElement extends LitElement {
 			min-height: 75px;
 		}
 
+		.badge-and-copy {
+			display: flex;
+			align-items: center;
+			gap: 1rem;
+		}
+
 		sl-spinner {
 			font-size: 4rem;
 		}