vuefilemanager/resources/js/components/FilesView/SearchBar.vue

<template>
    <div @click="$openSpotlight()" class="relative cursor-pointer rounded-lg bg-light-background dark:bg-dark-foreground">
        <div class="flex w-56 items-center justify-between px-5 py-2.5 text-left xl:w-72">
            <div class="flex items-center">
                <search-icon size="18" class="vue-feather text-gray-400 dark:text-gray-600" />
                <span class="pl-2.5 text-xs font-bold text-gray-400 dark:text-gray-600 xl:text-sm">
                    {{ $t('inputs.placeholder_search_files') }}
                </span>
            </div>
            <span class="rounded border px-1 py-0.5 text-xs font-bold tracking-normal text-gray-400 dark:border-opacity-5 dark:text-gray-600 xl:text-sm">
                {{ metaKeyIcon }}+K
            </span>
        </div>
    </div>
</template>

<script>
import { SearchIcon } from 'vue-feather-icons'

export default {
    name: 'SearchBar',
    components: {
        SearchIcon,
    },
    computed: {
        metaKeyIcon() {
            return this.$isApple() ? '⌘' : '⊞'
        },
    },
}
</script>