mirror of
https://github.com/Blah-IM/Weblah.git
synced 2025-05-01 00:31:08 +00:00
74 lines
2.2 KiB
Svelte
74 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import Button from '$lib/components/Button.svelte';
|
|
import InputFrame from '$lib/components/InputFrame.svelte';
|
|
import { Icon, MagnifyingGlass, PencilSquare, XCircle } from 'svelte-hero-icons';
|
|
import { tw } from '$lib/tw';
|
|
import CurrentAccountPicture from './CurrentAccountPicture.svelte';
|
|
|
|
interface Props {
|
|
searchQuery?: string;
|
|
isSearchFocused: boolean;
|
|
}
|
|
|
|
let { searchQuery = $bindable(''), isSearchFocused = $bindable() }: Props = $props();
|
|
|
|
let inputElement: HTMLInputElement = $state();
|
|
|
|
function onTapClear(e: MouseEvent) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
searchQuery = '';
|
|
}
|
|
</script>
|
|
|
|
<header class="flex items-center justify-stretch gap-2 border-b border-ss-secondary p-2 shadow-xs">
|
|
<a
|
|
class={tw(
|
|
'transition-[opacity,transform] duration-200',
|
|
isSearchFocused && '-translate-x-full opacity-0'
|
|
)}
|
|
href="/settings"
|
|
>
|
|
<CurrentAccountPicture />
|
|
</a>
|
|
<InputFrame
|
|
class={tw('z-10 h-8 flex-1 transition-all duration-200', isSearchFocused && '-mx-10')}
|
|
>
|
|
<Icon src={MagnifyingGlass} class="size-5 text-slate-400" />
|
|
<input
|
|
type="search"
|
|
placeholder="Search"
|
|
class="w-full flex-1 bg-transparent text-sm leading-4 text-sf-primary focus:outline-hidden"
|
|
bind:value={searchQuery}
|
|
bind:this={inputElement}
|
|
onfocus={() => {
|
|
isSearchFocused = true;
|
|
}}
|
|
onblur={(e) => {
|
|
// If the related target is an anchor element, trigger the click as the user is trying to navigate
|
|
if (
|
|
e.relatedTarget instanceof HTMLAnchorElement ||
|
|
e.relatedTarget instanceof HTMLButtonElement
|
|
) {
|
|
e.relatedTarget.click();
|
|
}
|
|
isSearchFocused = false;
|
|
}}
|
|
/>
|
|
<button
|
|
tabindex="0"
|
|
class={tw(
|
|
'-mx-2 -my-1.5 flex size-8 cursor-text items-center justify-center text-slate-300 opacity-0 transition-[opacity,transform] duration-200 dark:text-slate-500',
|
|
isSearchFocused && 'translate-x-full cursor-default opacity-100'
|
|
)}
|
|
onclick={onTapClear}
|
|
>
|
|
<Icon src={XCircle} class="size-4" mini />
|
|
<span class="sr-only">Clear</span>
|
|
</button>
|
|
</InputFrame>
|
|
<Button class={tw('size-8 transition-opacity duration-200', isSearchFocused && 'opacity-0')}>
|
|
<Icon src={PencilSquare} class="size-5" />
|
|
<span class="sr-only">Compose</span>
|
|
</Button>
|
|
</header>
|