feat: add new cmd in the Playground sv create --from-playground (sveltejs#1537)

* feat: add new cmd in the Playground `sv create --from-playground`

* css > alert

* title & aria-label

Co-authored-by: Rich Harris <[email protected]>

* button text

Co-authored-by: Rich Harris <[email protected]>

* remove implicit size

Co-authored-by: Rich Harris <[email protected]>

* position & mask

Co-authored-by: Rich Harris <[email protected]>

---------

Co-authored-by: Rich Harris <[email protected]>

Author: 2 people

packages/repl/src/lib/Input/ComponentSelector.svelte

@@ -189,6 +189,19 @@
 			{#if download}
 				<button onclick={download}>Download app</button>
 			{/if}
+
+			<button
+				class="copy-button"
+				title="Copy `npx sv create --from-playground=&quot;...&quot;` to clipboard"
+				aria-label="Copy `npx sv create --from-playground=&quot;...&quot;` to clipboard"
+				onclick={() => {
+					navigator.clipboard.writeText(
+						`npx sv create --from-playground="${window.location.href}"`
+					);
+				}}
+			>
+				Set up locally
+			</button>
 		</Toolbox>
 	</div>
 </div>
@@ -360,4 +373,42 @@
 		stroke-linejoin: round;
 		fill: none;
 	}
+
+	.copy-button {
+		position: relative;
+
+		&::before,
+		&::after {
+			content: '';
+			display: block;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			right: 0;
+			top: 0;
+			background: currentColor;
+			mask: no-repeat calc(100% - 1rem) 50% / 1.6rem 1.6rem;
+			transition: opacity 0.2s;
+			transition-delay: 0.6s;
+		}
+
+		&::before {
+			mask-image: url(icons/copy-to-clipboard);
+		}
+
+		&::after {
+			mask-image: url(icons/check);
+			opacity: 0;
+		}
+
+		&:active::before {
+			opacity: 0;
+			transition: none;
+		}
+
+		&:active::after {
+			opacity: 1;
+			transition: none;
+		}
+	}
 </style>