search

app/Nav.tsx

@@ -2,7 +2,9 @@
 import styles from "../styles/modules/Nav.module.scss";
 import Image from "next/image";
 import Link from "next/link";
-import { useEffect } from "react";
+import { MutableRefObject, useEffect, useRef, useState } from "react";
+import async from "./articles/[categoryName]/[articleName]/head";
+import ContentTable from "./articles/[categoryName]/[articleName]/ContentTable";
 
 export type NavCategory = {
 	name: string;
@@ -43,6 +45,20 @@ function toggleTheme() {
 }
 
 export default function Nav({ categories }: { categories: NavCategory[] }) {
+	const [searchResults, setSearchResults] = useState([]);
+
+	async function handleSearchInput(event) {
+		const query = event.target.value;
+		let result = await fetch(`/api/search?q=${query}`);
+		let json = await result.json();
+
+		if (json.length == 0 && query.length > 0) {
+			setSearchResults([{ name: "", title: "No article found..." }]);
+		} else {
+			setSearchResults(json);
+		}
+	}
+
 	useEffect(() => {
 		if (localStorage.getItem("theme") == "dark") {
 			switchTheme("dark");
@@ -50,6 +66,11 @@ export default function Nav({ categories }: { categories: NavCategory[] }) {
 			switchTheme("light");
 		}
 	}, []);
+
+	useEffect(() => {
+		console.log(searchResults);
+	}, [searchResults]);
+
 	return (
 		<nav className={styles.nav}>
 			<div className={styles.containerLeft}>
@@ -89,7 +110,20 @@ export default function Nav({ categories }: { categories: NavCategory[] }) {
 							<path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352c79.5 0 144-64.5 144-144s-64.5-144-144-144S64 128.5 64 208s64.5 144 144 144z" />
 						</svg>
 					</div>
-					<input type="text" name="" id="" />
+					<input onInput={handleSearchInput} type="text" name="" id="" />
+				</div>
+				<div className={styles.searchResults}>
+					<div className={styles.content}>
+						{searchResults.map((s) => {
+							{
+								return (
+									<Link href={`/articles/${s.name.toLowerCase()}`}>
+										{s.title}
+									</Link>
+								);
+							}
+						})}
+					</div>
 				</div>
 			</div>
 			<div className={styles.containerRight}>

pages/api/search.tsx

@@ -7,9 +7,10 @@ export default async function search(req, res) {
 	query = query.toLowerCase().replaceAll("%20", "");
 	query = query.toLowerCase().replaceAll(" ", "");
 
-	if (query.length > 2) {
+	if (query.length > 1) {
 		const articles = await prisma.article.findMany({
 			select: { title: true, name: true },
+			take: 5,
 		}); //TODO order by most viewed
 
 		let result = [];

styles/modules/Nav.module.scss

@@ -112,6 +112,10 @@
 				}
 			}
 
+			&:focus-within + .searchResults {
+				display: block;
+			}
+
 			input {
 				width: 300px;
 				height: 30px;
@@ -134,6 +138,44 @@
 				}
 			}
 		}
+
+		.searchResults {
+			display: none;
+			position: absolute;
+			top: 48px;
+
+			&:hover {
+				display: block;
+			}
+
+			@media (max-width: $nav-breakpoint-2) {
+				top: 94px;
+			}
+
+			.content {
+				background-color: rgb(18, 18, 18);
+				width: 335px;
+				a {
+					text-decoration: none;
+					display: block;
+					width: 100%;
+					padding: 5px 10px 5px 10px;
+					float: none;
+					border-left: 2px solid transparent;
+					transition: all 50ms linear;
+					text-overflow: ellipsis;
+					font-size: 0.8em;
+
+					&:hover {
+						border-color: var(--color-accent);
+						background-color: rgba(41, 41, 41, 0.2);
+					}
+				}
+				@media (max-width: $nav-breakpoint-4) {
+					width: 235px;
+				}
+			}
+		}
 	}
 
 	.containerRight {