feat: ✨ add search box with fzf

components/Header.css

@@ -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;

components/Header.tsx

@@ -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'>
+				<SearchBox />
-					<i class='ri-search-line'></i>
-					<span>&nbsp;Rechercher</span>
-				</button>
 				<ThemePicker />
 			</div>
 		</header>

islands/SearchBox.css

@@ -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;
+}

islands/SearchBox.tsx

@@ -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>
+		</>
+	)
+}

src/stylesheets/components.css

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