52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
"use client"
|
|
|
|
import React, { useState } from 'react'
|
|
import Fuse from 'fuse.js'
|
|
|
|
const data = [
|
|
{ title: 'Document 1', content: 'Content of document 1', url: '/inventory' },
|
|
{ title: 'Document 2', content: 'Content of document 2', url: '/about' },
|
|
]
|
|
|
|
const fuse = new Fuse(data, {
|
|
keys: ['title', 'content'],
|
|
})
|
|
|
|
const Search = () => {
|
|
const [query, setQuery] = useState('')
|
|
const [results, setResults] = useState([])
|
|
|
|
const handleSearch = (event: any) => {
|
|
const { value } = event.target
|
|
setQuery(value)
|
|
if (value.trim()) {
|
|
const searchResults = fuse.search(value).map(({ item }) => item)
|
|
setResults(searchResults)
|
|
} else {
|
|
setResults([])
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<input
|
|
type="text"
|
|
value={query}
|
|
onChange={handleSearch}
|
|
placeholder="Search documentation"
|
|
/>
|
|
<ul>
|
|
{results.map((result, index) => (
|
|
<li key={index}>
|
|
<a href={result.url}>
|
|
<h3>{result.title}</h3>
|
|
<p>{result.content}</p>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Search |