gradio

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

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

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

11
	<td class="td-button">
12
		<button
13
			on:click={() => {
14
				copied = true;
15
				navigator.clipboard.writeText(radius.tokenName);
16
				setTimeout(() => {
17
					copied = false;
18
				}, 1000);
19
			}}
20
			style="border-radius: {radius.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

33
	.copy-text {
34
		background-color: rgb(255 255 255 / 68%);
35
		font-size: 0.8em;
36
		width: fit-content;
37
		margin: 0 auto;
38
		padding: 5px 10px;
39
		border-radius: 10px;
40
		color: #8d9196;
41
	}
42

43
	button {
44
		border: none;
45
		width: 100%;
46
		height: 50px;
47
		border-radius: 15px;
48
		cursor: pointer;
49
		background-color: white;
50
		border: 3px solid #fb923c;
51
	}
52

53
	td {
54
		padding: 10px;
55
	}
56
</style>
57