gradio

1
<script lang="ts">
2
	import { createEventDispatcher } from "svelte";
3
	import api_logo from "./img/api-logo.svg";
4
	import Clear from "./img/clear.svelte";
5

6
	export let root: string;
7
	export let api_count: number;
8

9
	const dispatch = createEventDispatcher();
10
</script>
11

12
<h2>
13
	<img src={api_logo} alt="" />
14
	<div>
15
		API documentation
16
		<div class="url">
17
			{root}
18
		</div>
19
	</div>
20
	<span class="counts">
21
		<span class="url">{api_count}</span> API endpoint{#if api_count > 1}s{/if}
22
	</span>
23
</h2>
24

25
<button on:click={() => dispatch("close")}>
26
	<Clear />
27
</button>
28

29
<style>
30
	h2 {
31
		display: flex;
32
		color: var(--body-text-color);
33
		font-weight: var(--weight-semibold);
34
		gap: var(--size-4);
35
	}
36

37
	h2 img {
38
		margin-right: var(--size-2);
39
		width: var(--size-4);
40
		display: inline-block;
41
	}
42

43
	.url {
44
		color: var(--color-accent);
45
		font-weight: normal;
46
	}
47

48
	button {
49
		position: absolute;
50
		top: var(--size-5);
51
		right: var(--size-6);
52
		width: var(--size-4);
53
		color: var(--body-text-color);
54
	}
55

56
	button:hover {
57
		color: var(--color-accent);
58
	}
59

60
	@media (--screen-md) {
61
		button {
62
			top: var(--size-6);
63
		}
64

65
		h2 img {
66
			width: var(--size-5);
67
		}
68
	}
69

70
	.counts {
71
		margin-top: auto;
72
		margin-right: var(--size-8);
73
		margin-bottom: auto;
74
		margin-left: auto;
75
		color: var(--body-text-color);
76
		font-weight: var(--weight-light);
77
	}
78
</style>
79