35 lines
860 B
TypeScript
35 lines
860 B
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { useInbox } from '../store.js';
|
|
|
|
export function SearchBox(): React.ReactElement {
|
|
const [draft, setDraft] = useState('');
|
|
|
|
useEffect(() => {
|
|
const handle = setTimeout(() => {
|
|
const trimmed = draft.trim();
|
|
if (trimmed.length === 0) useInbox.getState().clearSearch();
|
|
else void useInbox.getState().searchNotes(trimmed);
|
|
}, 200);
|
|
return () => clearTimeout(handle);
|
|
}, [draft]);
|
|
|
|
return (
|
|
<input
|
|
type="search"
|
|
role="searchbox"
|
|
placeholder="검색…"
|
|
value={draft}
|
|
onChange={(e) => setDraft(e.target.value)}
|
|
aria-label="노트 검색"
|
|
style={{
|
|
marginLeft: 12,
|
|
padding: '4px 8px',
|
|
fontSize: 12,
|
|
border: '1px solid #bbb',
|
|
borderRadius: 4,
|
|
width: 200
|
|
}}
|
|
/>
|
|
);
|
|
}
|