cohabit/website
5
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: ✨ add search box with fzf

Browse source
This commit is contained in:
Julien Oculi 2024-02-14 14:15:33 +01:00
parent 4e3b4f94e3
commit 18507fb69c
5 changed files with 121 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
components/Header.css
View file

@ -151,29 +151,6 @@ header details {
}
}
.components__header__search {
padding: var(--_gap-half) var(--_gap);
align-self: center;
border: var(--_border-size) solid transparent;
background-color: var(--_translucent);
min-width: fit-content;
outline: none;
&:focus-visible {
border: var(--_border-size) solid currentColor;
}
@media (width < 800px) {
& {
background-color: transparent;
}
& span {
display: none;
}
}
}
.components__header__nav_button {
color: var(--_font-color);
display: inline-block;

6
components/Header.tsx
View file

@ -1,4 +1,5 @@
import { asset } from '$fresh/runtime.ts'
import SearchBox from '../islands/SearchBox.tsx'
import ThemePicker from '../islands/ThemePicker.tsx'
export function Header() {
@ -61,10 +62,7 @@ export function Header() {
</details>
</li>
</nav>
<button class='components__header__search'>
<i class='ri-search-line'></i>
<span>&nbsp;Rechercher</span>
</button>
<SearchBox />
<ThemePicker />
</div>
</header>

64
islands/SearchBox.css Normal file
View file

@ -0,0 +1,64 @@
.islands__search_box__button {
padding: var(--_gap-half) var(--_gap);
border: var(--_border-size) solid transparent;
background-color: var(--_translucent);
min-width: fit-content;
outline: none;
&:focus-visible {
border: var(--_border-size) solid currentColor;
}
@media (width < 800px) {
& {
background-color: transparent;
}
& span {
display: none;
}
}
}
.islands__search_box__dialog {
width: var(--_wide-screen);
height: 80%;
overflow-y: scroll;
border: var(--_border-size) solid currentColor;
background: var(--_background-image) repeat top left / 800px;
background-color: var(--_background-color);
padding: var(--_gap);
gap: var(--_gap);
grid-template-rows: auto 1fr;
&[open] {
display: grid;
}
&::backdrop {
backdrop-filter: blur(var(--_blur));
}
& input {
padding: var(--_gap-half) var(--_gap);
border: var(--_border-size) solid transparent;
background-color: var(--_translucent);
height: fit-content;
outline: none;
position: sticky;
top: 0;
&:focus-visible {
border: var(--_border-size) solid currentColor;
}
}
}
.islands__search_box__dialog__content {
padding: var(--_gap-half);
width: 100%;
height: 100%;
text-align: left;
text-wrap: balance;
display: grid;
}

54
islands/SearchBox.tsx Normal file
View file

@ -0,0 +1,54 @@
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>&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>
</>
)
}

1
src/stylesheets/components.css
View file

@ -4,3 +4,4 @@
@import url('../../components/SponsorCards.css');
@import url('../../components/CohabitInfoTable.css');
@import url('../../islands/ThemePicker.css');
@import url('../../islands/SearchBox.css');