55 lines
1.1 KiB
TypeScript
55 lines
1.1 KiB
TypeScript
|
import { useEffect, useRef } from 'preact/hooks'
|
||
|
|
|
||
|
|
export default function SearchBox() {
|
||
|
|
const dialog = useRef<HTMLDialogElement>(null)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
dialog.current?.addEventListener('click', (event) => {
|
||
|
|
if (event.target === dialog.current) {
|
||
|
|
dialog.current?.close()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<button
|
||
|
|
class='islands__search_box__button'
|
||
|
|
onClick={() => dialog.current?.showModal()}
|
||
|
|
>
|
||
|
|
<i class='ri-search-line'></i>
|
||
|
|
<span> Rechercher</span>
|
||
|
|
</button>
|
||
|
|
<dialog ref={dialog} class='islands__search_box__dialog'>
|
||
|
|
<input type='search' name='' id='' placeholder='Rechercher' autoFocus />
|
||
|
|
<div class='islands__search_box__dialog__content'>
|
||
|
|
<h3>Machines</h3>
|
||
|
|
<ul>
|
||
|
|
<li>machine 1</li>
|
||
|
|
<li>machine 2</li>
|
||
|
|
<li>machine 3</li>
|
||
|
|
</ul>
|
||
|
|
<h3>Projets</h3>
|
||
|
|
<ul>
|
||
|
|
<li>projet 1</li>
|
||
|
|
<li>projet 2</li>
|
||
|
|
<li>projet 3</li>
|
||
|
|
</ul>
|
||
|
|
<h3>Blog</h3>
|
||
|
|
<ul>
|
||
|
|
<li>news 1</li>
|
||
|
|
<li>news 2</li>
|
||
|
|
<li>news 3</li>
|
||
|
|
</ul>
|
||
|
|
<h3>Usager</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Alice</li>
|
||
|
|
<li>Bob</li>
|
||
|
|
<li>Chloé</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</dialog>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|