File size: 1,387 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 |
<script>
import "@gradio/theme";
import "../../../app/test/mocks/theme.css";
import { page } from "$app/stores";
import { afterNavigate } from "$app/navigation";
const links = [
["/embeds", "Embeds"],
["/client-browser", "Client-Browser"],
["/client-node", "Client-Node"]
];
$: afterNavigate(() => (location.hash = $page.url.pathname.replace("/", "")));
</script>
<svelte:head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
/>
</svelte:head>
<div class="prose">
<h1><span style="color: var(--color-accent);">Gradio</span> Test Space</h1>
<ul>
{#each links as [url, name]}
<li><a href={url} class:active={url === $page.route.id}>{name}</a></li>
{/each}
</ul>
<slot />
</div>
<style>
div {
margin: auto;
width: 100%;
max-width: 800px;
}
ul {
display: flex;
gap: var(--spacing-xxl);
list-style: none;
}
a {
color: var(--link-text-color);
text-decoration: none;
}
a.active {
color: var(--color-accent);
font-weight: bold;
}
.prose {
margin-top: var(--size-5);
}
</style>
|