mirror of
https://github.com/StanGirard/quivr.git
synced 2024-08-17 00:50:37 +03:00
feat: add brain management tabs
This commit is contained in:
parent
25f859a31e
commit
96961f3efb
@ -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>
|
||||
);
|
||||
};
|
@ -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>
|
||||
);
|
||||
};
|
@ -0,0 +1 @@
|
||||
export * from "./BrainTabTrigger";
|
@ -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,
|
||||
};
|
||||
};
|
@ -0,0 +1 @@
|
||||
export * from "./BrainManagementTabs";
|
@ -0,0 +1 @@
|
||||
export type BrainManagementTab = "settings" | "people" | "knowledge";
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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",
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user