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 101 102 103 104 105 | 8260x 857x 857x 2x 295x 2509x 826x 857x 826x 826x 4130x 240x 2509x 1683x 857x 826x 1652x 2x 2509x 857x 826x 826x 1652x 55x 2509x 1683x 4161x 76x 7434x 7434x 7434x 7434x 7434x 44604x 22302x | import React from "react";
import {
ToggleGroup,
ToggleGroupItem,
} from "@/ahuora-design-system/ui/toggle-group";
import { ToolTipCover } from "@/ahuora-design-system/ui/tooltip";
import { useSearchParam } from "../../../../hooks/searchParams";
import { ContentTypes, TABS, TabPositions } from "./LeftSideBarTabDefinitions";
function LeftSideBarTabs() {
const [content, setContent] = useSearchParam("content");
const switchTab = (tab: ContentTypes) => {
if (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 || ContentTypes.unitOps}
>
<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={<ClonedIcon originalIcon={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={<ClonedIcon originalIcon={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={<ClonedIcon originalIcon={tabItem.icon} />}
onClick={() => switchTab(tabItem.id)}
label={tabItem.tooltipContent}
value={tabItem.id}
/>
))}
</div>
</ToggleGroup>
</nav>
);
}
const ClonedIcon = ({ originalIcon }) =>
React.cloneElement(originalIcon, {
...originalIcon.props,
className: "icon-large",
});
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 LeftSideBarTabs;
|