Carlos Florêncio
49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { IconLoader2, IconSearch, IconX } from "@tabler/icons-react";
|
|
import { Input } from "@kandev/ui/input";
|
|
import { PanelHeaderBar } from "./panel-primitives";
|
|
|
|
type FileBrowserSearchHeaderProps = {
|
|
isSearching: boolean;
|
|
localSearchQuery: string;
|
|
searchInputRef: React.RefObject<HTMLInputElement | null>;
|
|
onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
onCloseSearch: () => void;
|
|
};
|
|
|
|
export function FileBrowserSearchHeader({
|
|
isSearching,
|
|
localSearchQuery,
|
|
searchInputRef,
|
|
onSearchChange,
|
|
onCloseSearch,
|
|
}: FileBrowserSearchHeaderProps) {
|
|
return (
|
|
<PanelHeaderBar className="group/header">
|
|
{isSearching ? (
|
|
<IconLoader2 className="h-3.5 w-3.5 text-muted-foreground animate-spin shrink-0" />
|
|
) : (
|
|
<IconSearch className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
|
|
)}
|
|
<Input
|
|
ref={searchInputRef}
|
|
type="text"
|
|
value={localSearchQuery}
|
|
onChange={onSearchChange}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Escape") onCloseSearch();
|
|
}}
|
|
placeholder="Search files..."
|
|
className="flex-1 min-w-0 h-5 text-xs border-none bg-transparent shadow-none focus-visible:ring-0 px-2"
|
|
/>
|
|
<button
|
|
className="text-muted-foreground hover:text-foreground shrink-0 cursor-pointer"
|
|
onClick={onCloseSearch}
|
|
>
|
|
<IconX className="h-3.5 w-3.5" />
|
|
</button>
|
|
</PanelHeaderBar>
|
|
);
|
|
}
|