jankboard/client/src/lib/Dashboard/TopBar/GearSelector.svelte

21 lines
648 B
Svelte
Raw Normal View History

2024-02-21 20:10:42 -08:00
<script lang="ts">
export let selectedGear: Gear | '-999'
2024-02-21 20:10:42 -08:00
</script>
<div class="flex justify-center w-full">
<div class="flex flex-row gap-2 text-neutral-400 text-xl font-bold">
<div class:highlighted={selectedGear === 'park'}>P</div>
<div class:highlighted={selectedGear === 'reverse'}>R</div>
<div class:highlighted={selectedGear === 'neutral'}>N</div>
<div class:highlighted={selectedGear === 'low'}>L</div>
<div class:highlighted={selectedGear === 'auto'}>A</div>
<div class:highlighted={selectedGear === 'drive'}>D</div>
2024-02-21 20:10:42 -08:00
</div>
</div>
<style lang="postcss">
.highlighted {
@apply text-white;
}
</style>