import Fuse from 'fuse.js';
 
const notes = [
  {
    noteHeading: 'Note 1',
    noteDescription: 'This is note 1',
    noteTags: ['mathematics', 'limits'],
  },
  {
    noteHeading: 'Note 2',
    noteDescription: 'This is note 2',
    noteTags: ['physics', 'fluid-dynamics'],
  },
	// ....
];
 
const Component = () => {
	const fuse = new Fuse(notes, {
		keys: ['noteHeading', 'noteDescription', 'noteTags'],
		includeMatches: true, // . When true, each record in the result set will include the indices of the matched characters. These can consequently be used for highlighting purposes
		useExtendedSearch: true, // When true, it enables the use of unix-like search commands.
	});
 
	const results = inputValue ? fuse.search(inputValue) : notes;
 
	return (
		<>
			<input onChange={...} value={...}>
			{results.map(result => (
				<p className='text-slate-600 font-base'>
					{note.noteDescription || note.item.noteDescription}
				</p>
			))}
		</>
	)
}