js/storybook/helpers/TextSizeRow.svelte

<script lang="ts">
	export let textSize: { tokenName: string; value: string };

	let copied = false;
</script>

<tr>
	<td class="token-name"><pre>{textSize.tokenName}</pre></td>
	<td><pre>{textSize.value}</pre></td>

	<td class="td-button">
		<button
			on:click={() => {
				copied = true;
				navigator.clipboard.writeText(textSize.tokenName);
				setTimeout(() => {
					copied = false;
				}, 1000);
			}}
			><div style="font-size: {textSize.value}">Gradio</div>
			<div class="copy-text">
				{copied ? "Copied to clipboard!" : "Copy token"}
			</div>
		</button>
	</td>
</tr>

<style>
	.td-button {
		width: 100%;
	}

	.copy-text {
		background-color: rgb(255 255 255 / 68%);
		font-size: 0.8em;
		width: fit-content;
		margin: 0 auto;
		padding: 5px 10px;
		border-radius: 10px;
		color: #8d9196;
	}

	button {
		border: none;
		width: 100%;
		cursor: pointer;
		background-color: white;
	}

	td {
		padding: 10px;
	}
</style>