gradio

1
<script lang="ts">
2
	export let space: { tokenName: string; value: string };
3

4
	let copied = false;
5
</script>
6

7
<tr>
8
	<td class="token-name"><pre>{space.tokenName}</pre></td>
9
	<td><pre>{space.value}</pre></td>
10

11
	<td class="td-button">
12
		<button
13
			on:click={() => {
14
				copied = true;
15
				navigator.clipboard.writeText(space.tokenName);
16
				setTimeout(() => {
17
					copied = false;
18
				}, 1000);
19
			}}
20
			style="height: {space.value};"
21
			><div class="copy-text">
22
				{copied ? "Copied to clipboard!" : "Copy token"}
23
			</div>
24
		</button></td
25
	>
26
</tr>
27

28
<style>
29
	.td-button {
30
		width: 100%;
31
	}
32
	.copy-text {
33
		font-size: 0.8em;
34
		margin: 15px 0;
35
		width: max-content;
36
		color: #8d9196;
37
	}
38

39
	button {
40
		border: none;
41
		width: 100%;
42
		cursor: pointer;
43
		background-color: #fb923c;
44
	}
45

46
	td {
47
		padding: 10px 0;
48
	}
49
</style>
50