quivr/frontend/app/brains-management/components/BrainsTabs/BrainsTabs.tsx
Antoine Dewez b5e2d5ad9c
feat(frontend): Add Brain On Search Page (#2067)
# Description

- Implement Icon Component
- Implement TextButton Component
- Change Add Brain Button And Set it in the Search Page
- Fix Errors When sending empty message
- Change EsLint rules

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):
2024-01-22 17:37:45 -08:00

62 lines
1.8 KiB
TypeScript

import { useTranslation } from "react-i18next";
import Spinner from "@/lib/components/ui/Spinner";
import { Tabs, TabsContent, TabsList } from "@/lib/components/ui/Tabs";
import { BrainSearchBar } from "./components/BrainSearchBar";
import { BrainsList } from "./components/BrainsList";
import { useBrainsTabs } from "./hooks/useBrainsTabs";
import { StyledTabsTrigger } from "../StyledTabsTrigger";
export const BrainsTabs = (): JSX.Element => {
const { t } = useTranslation(["brain", "translation"]);
const {
searchQuery,
isFetchingBrains,
setSearchQuery,
brains,
privateBrains,
publicBrains,
} = useBrainsTabs();
if (isFetchingBrains && brains.length === 0) {
return (
<div className="flex w-full h-full justify-center items-center">
<Spinner />
</div>
);
}
return (
<Tabs defaultValue="all" className="flex flex-col">
<TabsList className="flex flex-row justify-start gap-2 border-b-2 rounded-none pb-3">
<StyledTabsTrigger value="all">
{t("translation:all")}
</StyledTabsTrigger>
<StyledTabsTrigger value="private" className="capitalize">
{t("private_brain_label")}
</StyledTabsTrigger>
<StyledTabsTrigger value="public" className="capitalize">
{t("public_brain_label")}
</StyledTabsTrigger>
<div className="w-full flex justify-end">
<BrainSearchBar
searchQuery={searchQuery}
setSearchQuery={setSearchQuery}
/>
</div>
</TabsList>
<TabsContent value="all">
<BrainsList brains={brains} />
</TabsContent>
<TabsContent value="private">
<BrainsList brains={privateBrains} />
</TabsContent>
<TabsContent value="public">
<BrainsList brains={publicBrains} />
</TabsContent>
</Tabs>
);
};