Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | 33x 467x 467x 148x 148x 467x 3736x 1868x 112x 3736x 934x 1x 3736x 467x 35x 33x 3269x | import {
ToggleGroup,
ToggleGroupItem,
} from "@/ahuora-design-system/ui/toggle-group";
import { ToolTipCover } from "@/ahuora-design-system/ui/tooltip";
import { memo } from "react";
import { useSearchParam } from "../../../../hooks/searchParams";
import { ContentTypes, TABS, TabPositions } from "./LeftSideBarTabDefinitions";
ContentTypes;
function LeftSideBarTabs() {
const [content, setContent] = useSearchParam("content");
const switchTab = (tab: ContentTypes) => {
Iif (content === tab){
setContent(ContentTypes.flowsheet)
} else {
setContent(tab);
}
}
return (
<nav className="w-[55px] bg-card h-full flex flex-col">
<ToggleGroup
type="single"
className="w-full flex flex-col items-center h-full"
value={content}
>
<div className="w-full flex flex-col items-center">
{TABS.filter((tabItem) => tabItem.position === TabPositions.top).map(
(tabItem) => (
<TabItem
key={tabItem.id}
open={content === tabItem.id}
icon={tabItem.icon}
onClick={() => switchTab(tabItem.id)}
label={tabItem.tooltipContent}
value={tabItem.id}
/>
),
)}
</div>
<div className="w-10 mx-auto my-1 border-t border-border"></div>
{TABS.filter((tabItem) => tabItem.position === TabPositions.second).map(
(tabItem) => (
<TabItem
key={tabItem.id}
open={content === tabItem.id}
icon={tabItem.icon}
onClick={() => switchTab(tabItem.id)}
label={tabItem.tooltipContent}
value={tabItem.id}
/>
),
)}
<div className="w-full flex flex-col items-center"></div>
<div className="w-full pt-2 mt-auto flex flex-col items-center">
{TABS.filter(
(tabItem) => tabItem.position === TabPositions.bottom,
).map((tabItem) => (
<TabItem
key={tabItem.id}
open={content === tabItem.id}
icon={tabItem.icon}
onClick={() => switchTab(tabItem.id)}
label={tabItem.tooltipContent}
value={tabItem.id}
/>
))}
</div>
</ToggleGroup>
</nav>
);
}
const TabItem = ({
open,
icon,
onClick,
label,
value,
}) => (
<ToolTipCover asChild content={label} side="right" delay={0}>
<ToggleGroupItem
value={value}
aria-label={label}
className="w-11 h-11 m-1 flex justify-center items-center"
data-state={open ? "on" : "off"}
onClick={onClick}
>
{icon}
</ToggleGroupItem>
</ToolTipCover>
);
export default memo(LeftSideBarTabs);
|