mirror of https://github.com/gabehf/Koito.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
970 B
33 lines
970 B
import { useEffect, useState } from "react";
|
|
import SidebarItem from "./SidebarItem";
|
|
import { Search } from "lucide-react";
|
|
import SearchModal from "../modals/SearchModal";
|
|
|
|
interface Props {
|
|
size: number
|
|
}
|
|
|
|
export default function SidebarSearch({ size } : Props) {
|
|
const [open, setModalOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === '/' && !open) {
|
|
e.preventDefault();
|
|
setModalOpen(true);
|
|
}
|
|
};
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
}, [open]);
|
|
|
|
return (
|
|
<SidebarItem
|
|
space={26}
|
|
onClick={() => setModalOpen(true)}
|
|
name="Search"
|
|
keyHint="/"
|
|
children={<Search size={size}/>} modal={<SearchModal open={open} setOpen={setModalOpen} />}
|
|
/>
|
|
)
|
|
} |