SkipLinks

<script lang="ts">
	import SkipLinks from '@tcpsystems/ui/foundation/SkipLinks';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Button from '@tcpsystems/ui/foundation/Button';
	const uid = $props.id();
</script>

<SkipLinks links={[{ label: 'Skip to content', href: `#${uid}-main` }]} />
<Stack>
	<p>Press Tab to reveal the skip links, then Enter to jump past navigation.</p>
	<nav id={`${uid}-nav`} tabindex="-1" aria-label="Project navigation">
		<Button href={`#${uid}-main`}>Deployments</Button>
	</nav>
	<main id={`${uid}-main`} tabindex="-1">
		<h2>Gateway deployments</h2><p>All replicas are ready to serve traffic.</p>
	</main>
</Stack>

<script lang="ts">
	import SkipLinks from '@tcpsystems/ui/foundation/SkipLinks';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Button from '@tcpsystems/ui/foundation/Button';
	const uid = $props.id();
</script>

<SkipLinks links={[{ label: 'Skip to content', href: `#${uid}-main` }, { label: 'Skip to navigation', href: `#${uid}-nav` }]} />
<Stack>
	<p>Press Tab to reveal the skip links, then Enter to jump past navigation.</p>
	<nav id={`${uid}-nav`} tabindex="-1" aria-label="Project navigation">
		<Button href={`#${uid}-main`}>Deployments</Button>
	</nav>
	<main id={`${uid}-main`} tabindex="-1">
		<h2>Gateway deployments</h2><p>All replicas are ready to serve traffic.</p>
	</main>
</Stack>