nav-search.svelte (1156B)
1 <script lang="ts"> 2 import { locale, ls } from "$lib/utils/i18n"; 3 import { Glyph, Input } from "@radroots/apps-lib"; 4 5 let val_search = $state(``); 6 7 const handle_search = async (): Promise<void> => { 8 alert(`todo handle search`); 9 }; 10 </script> 11 12 <div class={`flex flex-row h-full w-full justify-start items-center`}> 13 <Input 14 bind:val={val_search} 15 basis={{ 16 classes: `h-[22px] pl-2 bg-gray-200 text-[13px] font-rsfd placeholder:lowercase`, 17 placeholder: `${$ls(`common.search`)} ${$locale}`, 18 callback_keydown: async ({ is_submit }) => { 19 if (is_submit) await handle_search(); 20 }, 21 }} 22 /> 23 <button 24 class={`flex flex-row h-[22px] flex-shrink-0 px-2 justify-center items-center bg-lime-500 hover:bg-lime-400`} 25 onclick={async () => { 26 locale.set($locale === `en` ? `es` : `en`); 27 }} 28 > 29 <Glyph 30 basis={{ 31 classes: `text-white`, 32 size: `xs`, 33 weight: `bold`, 34 key: `magnifying-glass`, 35 }} 36 /> 37 </button> 38 </div>