QuivrHQ/quivr
1
1
Fork 0
mirror of https://github.com/QuivrHQ/quivr.git synced 2024-12-14 17:03:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add brain management tabs (#753)

Browse Source
This commit is contained in:
Mamadou DICKO 2023-07-25 09:54:34 +02:00 committed by GitHub
parent 25f859a31e
commit 37f904122c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 137 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/app/brains-management/[brainId]/components/BrainManagementTabs/BrainManagementTabs.tsx Normal file
View File

@ -0,0 +1,39 @@
import { Content, List, Root } from "@radix-ui/react-tabs";
import { BrainTabTrigger } from "./components";
import { useBrainManagementTabs } from "./hooks/useBrainManagementTabs";
export const BrainManagementTabs = (): JSX.Element => {
const { selectedTab, setSelectedTab } = useBrainManagementTabs();
return (
<Root
className="shadow-md min-h-[50%] dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl overflow-hidden bg-white dark:bg-black border border-black/10 dark:border-white/25 p-4"
defaultValue="settings"
>
<List className="flex justify-between" aria-label="Manage your brain">
<BrainTabTrigger
selected={selectedTab === "settings"}
label="Settings"
value="settings"
onChange={setSelectedTab}
/>
<BrainTabTrigger
selected={selectedTab === "people"}
label="People"
value="people"
onChange={setSelectedTab}
/>
<BrainTabTrigger
selected={selectedTab === "knowledge"}
label="Knowledge"
value="knowledge"
onChange={setSelectedTab}
/>
</List>
<Content value="settings">
<p>coming soon</p>
</Content>
</Root>
);
};

28
frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/BrainTabTrigger.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Trigger } from "@radix-ui/react-tabs";
import { BrainManagementTab } from "../types";
type BrainTabTriggerProps = {
label: string;
value: BrainManagementTab;
selected: boolean;
onChange: (value: BrainManagementTab) => unknown;
};
export const BrainTabTrigger = ({
label,
value,
selected,
onChange,
}: BrainTabTriggerProps): JSX.Element => {
return (
<Trigger
className={`tracking-wide flex-1 text-lg align-center ${
selected ? "font-bold" : ""
}`}
value={value}
onClick={() => onChange(value)}
>
{label}
</Trigger>
);
};

1
frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/index.ts Normal file
View File

@ -0,0 +1 @@
export * from "./BrainTabTrigger";

14
frontend/app/brains-management/[brainId]/components/BrainManagementTabs/hooks/useBrainManagementTabs.ts Normal file
View File

@ -0,0 +1,14 @@
import { useState } from "react";
import { BrainManagementTab } from "../types";
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export const useBrainManagementTabs = () => {
const [selectedTab, setSelectedTab] =
useState<BrainManagementTab>("settings");
return {
selectedTab,
setSelectedTab,
};
};

1
frontend/app/brains-management/[brainId]/components/BrainManagementTabs/index.ts Normal file
View File

@ -0,0 +1 @@
export * from "./BrainManagementTabs";

1
frontend/app/brains-management/[brainId]/components/BrainManagementTabs/types.ts Normal file
View File

@ -0,0 +1 @@
export type BrainManagementTab = "settings" | "people" | "knowledge";

23
frontend/app/brains-management/[brainId]/page.tsx
View File

@ -1,9 +1,28 @@
"use client";
import { UUID } from "crypto";
import { useParams } from "next/navigation";
import { BrainManagementTabs } from "./components/BrainManagementTabs/BrainManagementTabs";
const BrainsManagement = (): JSX.Element => {
const params = useParams();
const brainId = params?.brainId as UUID | undefined;
if (brainId === undefined) {
return (
<div className="flex justify-center mt-5 w-full">
<div className="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded relative max-w-md h-fit">
<p>Select a brain please</p>
</div>
</div>
);
}
return (
<main className="flex flex-col w-full pt-10" data-testid="brain-page">
<p>Coming soon</p>
<main className="flex flex-col w-full pt-20 px-20">
<BrainManagementTabs />
</main>
);
};

1
frontend/package.json
View File

@ -23,6 +23,7 @@
"@radix-ui/react-dialog": "^1.0.3",
"@radix-ui/react-popover": "^1.0.6",
"@radix-ui/react-select": "^1.2.2",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.3",
"@radix-ui/react-tooltip": "^1.0.6",
"@sentry/nextjs": "^7.57.0",

31
frontend/yarn.lock
View File

@ -918,6 +918,22 @@
"@babel/runtime" "^7.13.10"
"@radix-ui/react-slot" "1.0.2"
"@radix-ui/react-roving-focus@1.0.4":
version "1.0.4"
resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz#e90c4a6a5f6ac09d3b8c1f5b5e81aab2f0db1974"
integrity sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/primitive" "1.0.1"
"@radix-ui/react-collection" "1.0.3"
"@radix-ui/react-compose-refs" "1.0.1"
"@radix-ui/react-context" "1.0.1"
"@radix-ui/react-direction" "1.0.1"
"@radix-ui/react-id" "1.0.1"
"@radix-ui/react-primitive" "1.0.3"
"@radix-ui/react-use-callback-ref" "1.0.1"
"@radix-ui/react-use-controllable-state" "1.0.1"
"@radix-ui/react-select@^1.2.2":
version "1.2.2"
resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-1.2.2.tgz#caa981fa0d672cf3c1b2a5240135524e69b32181"
@ -954,6 +970,21 @@
"@babel/runtime" "^7.13.10"
"@radix-ui/react-compose-refs" "1.0.1"
"@radix-ui/react-tabs@^1.0.4":
version "1.0.4"
resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz#993608eec55a5d1deddd446fa9978d2bc1053da2"
integrity sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/primitive" "1.0.1"
"@radix-ui/react-context" "1.0.1"
"@radix-ui/react-direction" "1.0.1"
"@radix-ui/react-id" "1.0.1"
"@radix-ui/react-presence" "1.0.1"
"@radix-ui/react-primitive" "1.0.3"
"@radix-ui/react-roving-focus" "1.0.4"
"@radix-ui/react-use-controllable-state" "1.0.1"
"@radix-ui/react-toast@^1.1.3":
version "1.1.4"
resolved "https://registry.yarnpkg.com/@radix-ui/react-toast/-/react-toast-1.1.4.tgz#9a7fc2d71700886f3292f7699c905f1e01be59e1"