gradio

1
<script lang="ts">
2
	import CopyButton from "./CopyButton.svelte";
3
	import { Block } from "@gradio/atoms";
4

5
	export let current_language: "python" | "javascript";
6

7
	let py_install = "pip install gradio_client";
8
	let js_install = "npm i -D @gradio/client";
9
</script>
10

11
<Block>
12
	<code>
13
		{#if current_language === "python"}
14
			<div class="copy">
15
				<CopyButton code={py_install} />
16
			</div>
17
			<div>
18
				<pre>$ {py_install}</pre>
19
			</div>
20
		{:else if current_language === "javascript"}
21
			<div class="copy">
22
				<CopyButton code={js_install} />
23
			</div>
24
			<div>
25
				<pre>$ {js_install}</pre>
26
			</div>
27
		{/if}
28
	</code>
29
</Block>
30

31
<style>
32
	code pre {
33
		overflow-x: auto;
34
		color: var(--body-text-color);
35
		font-family: var(--font-mono);
36
		tab-size: 2;
37
	}
38

39
	code {
40
		position: relative;
41
		display: block;
42
	}
43

44
	.copy {
45
		position: absolute;
46
		top: 0;
47
		right: 0;
48
		margin-top: -5px;
49
		margin-right: -5px;
50
	}
51
</style>
52