js/app/src/api_docs/InstallSnippet.svelte

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

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

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

<Block>
	<code>
		{#if current_language === "python"}
			<div class="copy">
				<CopyButton code={py_install} />
			</div>
			<div>
				<pre>$ {py_install}</pre>
			</div>
		{:else if current_language === "javascript"}
			<div class="copy">
				<CopyButton code={js_install} />
			</div>
			<div>
				<pre>$ {js_install}</pre>
			</div>
		{/if}
	</code>
</Block>

<style>
	code pre {
		overflow-x: auto;
		color: var(--body-text-color);
		font-family: var(--font-mono);
		tab-size: 2;
	}

	code {
		position: relative;
		display: block;
	}

	.copy {
		position: absolute;
		top: 0;
		right: 0;
		margin-top: -5px;
		margin-right: -5px;
	}
</style>