<script setup lang="ts">
const { openSearch } = useSearch()
</script>

<template>
  <button
    class="input input-ghost hover:bg-base-200 focus-visible:bg-base-200 cursor-pointer transition-colors focus:outline-none flex items-center gap-2"
    @click="openSearch"
  >
    <Icon name="heroicons-solid:search" class="size-4 shrink-0 opacity-60" />
    <span class="grow text-left hidden sm:inline">Search...</span>
    <Kbd sm class="hidden lg:inline-flex opacity-50"> <span class="me-1 text-sm">⌘</span>K </Kbd>
  </button>
</template>
