···

       
48
       
48
       
 
       
  return (

     

       
49
       
49
       
 
       
    <button

     

       
50
       
50
       
 
       
      onclick={() => setShowSearch(!showSearch())}

     

       
51
       
51
       
-
       
      class={`flex items-center gap-1 rounded-md ${isTouchDevice ? "p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" : "dark:bg-dark-100/70 text-baseline mr-1 box-border h-7 border-[0.5px] border-neutral-300 bg-neutral-100/70 px-2 text-xs hover:bg-neutral-200 active:bg-neutral-300 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"}`}

     

       
51
       
51
       
+
       
      class={`dark:bg-dark-100/70 text-baseline mr-1 box-border flex h-7 items-center gap-1 rounded-md border-[0.5px] border-neutral-300 bg-neutral-100/70 px-2 text-xs hover:bg-neutral-200 active:bg-neutral-300 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600`}

     

       
52
       
52
       
 
       
    >

     

       
53
       
53
       
-
       
      <span class={`iconify lucide--search ${isTouchDevice ? "text-lg" : ""}`}></span>

     

       
54
       
54
       
-
       
      <Show when={!isTouchDevice}>

     

       
53
       
53
       
+
       
      <span class={`iconify lucide--search`}></span>

     

       
54
       
54
       
+
       
      <Show

     

       
55
       
55
       
+
       
        when={!isTouchDevice}

     

       
56
       
56
       
+
       
        fallback={<span class="text-neutral-500 dark:text-neutral-400">Search</span>}

     

       
57
       
57
       
+
       
      >

     

       
55
       
58
       
 
       
        <kbd class="font-sans leading-none text-neutral-500 select-none dark:text-neutral-400">

     

       
56
       
59
       
 
       
          {/Mac/i.test(navigator.platform) ? "⌘" : "⌃"}K

     

       
57
       
60
       
 
       
        </kbd>