mirror of
https://github.com/StanGirard/quivr.git
synced 2024-09-11 13:15:41 +03:00
feat: add brain search bar
This commit is contained in:
parent
148f6e1e16
commit
fd26c1a4bb
@ -0,0 +1,24 @@
|
||||
import Field from "@/lib/components/ui/Field";
|
||||
|
||||
type BrainSearchBarProps = {
|
||||
searchQuery: string;
|
||||
setSearchQuery: (searchQuery: string) => void;
|
||||
};
|
||||
|
||||
export const BrainSearchBar = ({
|
||||
searchQuery,
|
||||
setSearchQuery,
|
||||
}: BrainSearchBarProps): JSX.Element => {
|
||||
return (
|
||||
<div className="m-2">
|
||||
<Field
|
||||
name="brainsearch"
|
||||
placeholder="Search for a brain"
|
||||
autoFocus
|
||||
autoComplete="off"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
@ -2,15 +2,15 @@
|
||||
import { motion, MotionConfig } from "framer-motion";
|
||||
import { MdChevronRight } from "react-icons/md";
|
||||
|
||||
import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
import { BrainListItem } from "./BrainListItem/BrainListItem";
|
||||
import { BrainSearchBar } from "./BrainSearchBar/BrainSearchBar";
|
||||
import { useBrainsList } from "../hooks/useBrainsList";
|
||||
|
||||
export const BrainsList = (): JSX.Element => {
|
||||
const { allBrains } = useBrainContext();
|
||||
const { open, setOpen } = useBrainsList();
|
||||
const { open, setOpen, searchQuery, setSearchQuery, brains } =
|
||||
useBrainsList();
|
||||
|
||||
return (
|
||||
<MotionConfig transition={{ massq: 1, damping: 10 }}>
|
||||
@ -39,11 +39,15 @@ export const BrainsList = (): JSX.Element => {
|
||||
data-testid="chats-list"
|
||||
>
|
||||
<div className="flex flex-col flex-1">
|
||||
<BrainSearchBar
|
||||
searchQuery={searchQuery}
|
||||
setSearchQuery={setSearchQuery}
|
||||
/>
|
||||
<div
|
||||
data-testid="chats-list-items"
|
||||
className="flex-1 overflow-auto scrollbar h-full"
|
||||
>
|
||||
{allBrains.map((brain) => (
|
||||
{brains.map((brain) => (
|
||||
<BrainListItem brain={brain} key={brain.id} />
|
||||
))}
|
||||
</div>
|
||||
|
@ -1,12 +1,15 @@
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
|
||||
import { useDevice } from "@/lib/hooks/useDevice";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
||||
export const useBrainsList = () => {
|
||||
const { isMobile } = useDevice();
|
||||
const [open, setOpen] = useState(!isMobile);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const { allBrains } = useBrainContext();
|
||||
|
||||
const pathname = usePathname();
|
||||
|
||||
@ -14,8 +17,19 @@ export const useBrainsList = () => {
|
||||
setOpen(!isMobile);
|
||||
}, [isMobile, pathname]);
|
||||
|
||||
const brains = allBrains.filter((brain) => {
|
||||
const query = searchQuery.toLowerCase();
|
||||
const name = brain.name.toLowerCase();
|
||||
|
||||
return name.includes(query);
|
||||
});
|
||||
|
||||
return {
|
||||
open,
|
||||
setOpen,
|
||||
searchQuery,
|
||||
setSearchQuery,
|
||||
|
||||
brains,
|
||||
};
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user