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"