File size: 1,329 Bytes
a03b3ba |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<script lang="ts">
import { createEventDispatcher } from "svelte";
import api_logo from "./img/api-logo.svg";
import Clear from "./img/clear.svelte";
export let root: string;
export let api_count: number;
const dispatch = createEventDispatcher();
</script>
<h2>
<img src={api_logo} alt="" />
<div>
API documentation
<div class="url">
{root}
</div>
</div>
<span class="counts">
<span class="url">{api_count}</span> API endpoint{#if api_count > 1}s{/if}
</span>
</h2>
<button on:click={() => dispatch("close")}>
<Clear />
</button>
<style>
h2 {
display: flex;
color: var(--body-text-color);
font-weight: var(--weight-semibold);
gap: var(--size-4);
}
h2 img {
margin-right: var(--size-2);
width: var(--size-4);
display: inline-block;
}
.url {
color: var(--color-accent);
font-weight: normal;
}
button {
position: absolute;
top: var(--size-5);
right: var(--size-6);
width: var(--size-4);
color: var(--body-text-color);
}
button:hover {
color: var(--color-accent);
}
@media (--screen-md) {
button {
top: var(--size-6);
}
h2 img {
width: var(--size-5);
}
}
.counts {
margin-top: auto;
margin-right: var(--size-8);
margin-bottom: auto;
margin-left: auto;
color: var(--body-text-color);
font-weight: var(--weight-light);
}
</style>
|