<script>
	import {
		IconCamera,
		IconCpu2,
		IconDeviceGamepad,
		IconKeyboard,
		IconMicrophone,
		IconMouse,
		IconVideo,
		IconVolume
	} from '@tabler/icons-svelte';
</script>

<nav>
	<h1>Universal Test Card</h1>

	<div class="options">
		<a href="card">
			<div class="icon"><IconVideo size={72} /></div>
			Video
		</a>
		<a href="audio">
			<div class="icon"><IconVolume size={72} /></div>
			Audio
		</a>
		<a href="keyboard">
			<div class="icon"><IconKeyboard size={72} /></div>
			Keyboard
		</a>
		<a href="mouse">
			<div class="icon"><IconMouse size={72} /></div>
			Mouse
		</a>
		<a href="gamepad">
			<div class="icon"><IconDeviceGamepad size={72} /></div>
			Gamepad
		</a>
		<a href="camera">
			<div class="icon"><IconCamera size={72} /></div>
			Camera
		</a>
		<a href="microphone">
			<div class="icon"><IconMicrophone size={72} /></div>
			Microphone
		</a>
		<a href="sensors">
			<div class="icon"><IconCpu2 size={72} /></div>
			Sensors
		</a>
	</div>
</nav>

<style>
	h1 {
		text-align: center;
		font-size: 2.5rem;
		margin: 1rem;
	}

	.options {
		display: flex;
		justify-content: space-evenly;
		gap: 2em;

		& a {
			text-align: center;
			text-decoration: none;
		}
	}
</style>
