<script lang="ts">
    export default {};

    import { RouterLink } from 'vue-router'
</script>

<template>
    <div class="p-4 flex items-center justify-between bg-ctp-base text-white">
        <h1 class="font-bold text-2xl">Naqvbar</h1>

        <div>
            <form class="relative">
                <label for="searchBar" class="hidden">Search</label>
                <v-icon name="io-search-outline" class="text-black absolute my-auto inset-y-0 left-2"></v-icon>
                <input type="text" id="searchBar" name="searchBar" placeholder="Search" class="rounded-md p-1 pl-8 text-black">
            </form>
        </div>


        <ul class="inline-flex space-x-6 font-medium">
            <router-link to="">Github</router-link>
            <router-link to="/preferences">Preferences</router-link>
            <router-link to="/about">About</router-link>
        </ul>
    </div>
</template>