chore: Update Navbar component imports and removed input

This commit is contained in:
Bram Suurd
2024-05-17 09:32:16 +02:00
parent 1216936db9
commit e3815c4836

View File

@@ -6,11 +6,12 @@ import logo from "../public/logo.png";
import Image from "next/image";
import { FaGithub } from "react-icons/fa";
import { ModeToggle } from "./theme-toggle";
import { LuGitPullRequestDraft } from "react-icons/lu";
import { LuBookOpenCheck } from "react-icons/lu";
import { LuClipboardSignature } from "react-icons/lu";
import {
LuGitPullRequestDraft,
LuBookOpenCheck,
LuClipboardSignature,
} from "react-icons/lu";
import { Coffee, Menu } from "lucide-react";
import { FaDiscord } from "react-icons/fa";
import {
Sheet,
SheetClose,
@@ -35,6 +36,7 @@ function Navbar() {
const [links, setLinks] = useState<Category[]>([]);
const [searchTerm, setSearchTerm] = useState("");
const inputRef = useRef<HTMLInputElement>(null);
const [shouldFocusInput, setShouldFocusInput] = useState(false);
useEffect(() => {
const handleScroll = () => {
@@ -48,25 +50,32 @@ function Navbar() {
};
}, []);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "/") {
inputRef.current?.focus();
event.preventDefault();
}
};
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "/") {
setShouldFocusInput(true);
event.preventDefault();
}
};
document.addEventListener("keydown", handleKeyDown);
return () => {
document.removeEventListener("keydown", handleKeyDown);
};
}, []);
document.addEventListener("keydown", handleKeyDown);
return () => {
document.removeEventListener("keydown", handleKeyDown);
};
}, []);
useEffect(() => {
if (shouldFocusInput) {
inputRef.current?.focus();
setShouldFocusInput(false);
}
}, [shouldFocusInput]);
const fetchLinks = async () => {
try {
const res = await pb.collection("categories").getFullList({
expand: "items",
requestKey : "navbar"
requestKey: "navbar",
});
setLinks(res as unknown as Category[]);
} catch (error) {
@@ -78,22 +87,12 @@ function Navbar() {
fetchLinks();
}, []);
const handleSearch = (value: string) => {
setSearchTerm(value);
};
const filteredLinks = useMemo(() => {
return links.filter((category) =>
category.expand.items.some((script) =>
script.title.toLowerCase().includes(searchTerm.toLowerCase()),
),
);
}, [links, searchTerm]);
return (
<>
<div
className={`fixed left-0 top-0 z-50 flex w-screen justify-center px-7 xl:px-0 ${isScrolled ? "border-b backdrop-blur-lg" : ""}`}
className={`fixed left-0 top-0 z-50 flex w-screen justify-center px-7 xl:px-0 ${
isScrolled ? "border-b backdrop-blur-lg" : ""
}`}
>
<div className="flex h-20 w-full max-w-7xl flex-row-reverse items-center justify-between sm:flex-row">
<h2 className="font-semibold ">
@@ -107,7 +106,7 @@ function Navbar() {
</h2>
<div className="flex items-center sm:hidden">
<Sheet>
<SheetTrigger>
<SheetTrigger onClick={() => setShouldFocusInput(false)}>
<Menu className="h-8 w-8" />
</SheetTrigger>
<SheetContent
@@ -119,19 +118,12 @@ function Navbar() {
<SheetDescription className=" overflow-scroll">
<div className="flex min-w-72 flex-col overflow-scroll sm:max-w-72">
<h1 className="mb-5 text-xl font-bold">Scripts</h1>
<Input
className="mb-5"
type="text"
placeholder="Type '/' to search"
onChange={(e) => handleSearch(e.target.value)}
ref={inputRef}
/>
<Accordion
type={searchTerm ? "multiple" : "single"}
collapsible
className="overflow-scroll"
>
{filteredLinks.map((category) => (
{links.map((category) => (
<AccordionItem
key={category.collectionId}
value={category.catagoryName}
@@ -173,12 +165,6 @@ function Navbar() {
</Sheet>
</div>
<div className="hidden gap-2 sm:flex">
{/* <Button variant="ghost" asChild>
<Link target="_blank" href="https://discord.gg/2zZ5Y2b">
<FaDiscord className="mr-2 h-4 w-4" />
Join Discord
</Link>
</Button> */}
<Button variant="ghost" asChild>
<Link
target="_blank"