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 106 107 108 | 37x 536x 536x 177x 177x 536x 536x 4288x 2144x 136x 4288x 1072x 2x 4288x 536x 39x 37x 3752x 37x 3752x | 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";
import React from 'react';
ContentTypes;
function LeftSideBarTabs() {
const [content, setContent] = useSearchParam("content");
const switchTab = (tab: ContentTypes) => {
Iif (content === tab) {
setContent(ContentTypes.flowsheet)
} else {
setContent(tab);
}
}
console.log(TABS);
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={<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 memo(LeftSideBarTabs);
|