feat: add brain management tabs (#753)

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 (
+    <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>
+  );
+};

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 (
+    <Trigger
+      className={`tracking-wide flex-1 text-lg align-center ${
+        selected ? "font-bold" : ""
+      }`}
+      value={value}
+      onClick={() => onChange(value)}
+    >
+      {label}
+    </Trigger>
+  );
+};

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/index.ts

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

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<BrainManagementTab>("settings");
+
+  return {
+    selectedTab,
+    setSelectedTab,
+  };
+};

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/index.ts

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

frontend/app/brains-management/[brainId]/components/BrainManagementTabs/types.ts

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

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 (
-    <main className="flex flex-col w-full pt-10" data-testid="brain-page">
+      <div className="flex justify-center mt-5 w-full">
-      <p>Coming soon</p>
+        <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-20 px-20">
+      <BrainManagementTabs />
     </main>
   );
 };

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",

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"