website/islands/SearchBox.tsx

62 lines
1.2 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()}
title={'Ouvrir la recherche'}
>
<i class='ri-search-line'></i>
<span>&nbsp;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>
</>
)
}