From 96961f3efbe64da12943849d4da81f61347ab99c Mon Sep 17 00:00:00 2001 From: mamadoudicko Date: Mon, 24 Jul 2023 16:01:09 +0200 Subject: [PATCH] feat: add brain management tabs --- .../BrainManagementTabs.tsx | 39 +++++++++++++++++++ .../components/BrainTabTrigger.tsx | 28 +++++++++++++ .../BrainManagementTabs/components/index.ts | 1 + .../hooks/useBrainManagementTabs.ts | 14 +++++++ .../components/BrainManagementTabs/index.ts | 1 + .../components/BrainManagementTabs/types.ts | 1 + .../app/brains-management/[brainId]/page.tsx | 23 ++++++++++- frontend/package.json | 1 + frontend/yarn.lock | 31 +++++++++++++++ 9 files changed, 137 insertions(+), 2 deletions(-) create mode 100644 frontend/app/brains-management/[brainId]/components/BrainManagementTabs/BrainManagementTabs.tsx create mode 100644 frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/BrainTabTrigger.tsx create mode 100644 frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/index.ts create mode 100644 frontend/app/brains-management/[brainId]/components/BrainManagementTabs/hooks/useBrainManagementTabs.ts create mode 100644 frontend/app/brains-management/[brainId]/components/BrainManagementTabs/index.ts create mode 100644 frontend/app/brains-management/[brainId]/components/BrainManagementTabs/types.ts diff --git a/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/BrainManagementTabs.tsx b/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/BrainManagementTabs.tsx new file mode 100644 index 000000000..31fcb798b --- /dev/null +++ b/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/BrainManagementTabs.tsx @@ -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 ( + + + + + + + +

coming soon

+ + + ); +}; diff --git a/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/BrainTabTrigger.tsx b/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/BrainTabTrigger.tsx new file mode 100644 index 000000000..8371a271a --- /dev/null +++ b/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/BrainTabTrigger.tsx @@ -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 ( + onChange(value)} + > + {label} + + ); +}; diff --git a/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/index.ts b/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/index.ts new file mode 100644 index 000000000..8f6088c41 --- /dev/null +++ b/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/index.ts @@ -0,0 +1 @@ +export * from "./BrainTabTrigger"; diff --git a/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/hooks/useBrainManagementTabs.ts b/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/hooks/useBrainManagementTabs.ts new file mode 100644 index 000000000..24b9012a4 --- /dev/null +++ b/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/hooks/useBrainManagementTabs.ts @@ -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("settings"); + + return { + selectedTab, + setSelectedTab, + }; +}; diff --git a/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/index.ts b/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/index.ts new file mode 100644 index 000000000..34dbd7a95 --- /dev/null +++ b/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/index.ts @@ -0,0 +1 @@ +export * from "./BrainManagementTabs"; diff --git a/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/types.ts b/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/types.ts new file mode 100644 index 000000000..d4ffa10ce --- /dev/null +++ b/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/types.ts @@ -0,0 +1 @@ +export type BrainManagementTab = "settings" | "people" | "knowledge"; diff --git a/frontend/app/brains-management/[brainId]/page.tsx b/frontend/app/brains-management/[brainId]/page.tsx index 2229d64dd..dbe2b8ee1 100644 --- a/frontend/app/brains-management/[brainId]/page.tsx +++ b/frontend/app/brains-management/[brainId]/page.tsx @@ -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 ( +
+
+

Select a brain please

+
+
+ ); + } + return ( -
-

Coming soon

+
+
); }; diff --git a/frontend/package.json b/frontend/package.json index 3d8819f06..c71286583 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -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", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index bb025768a..42cd8186c 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -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"