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 109 110 | 576x 110x 110x 110x 7x 7x 398x 110x 96x 96x 192x 206x 206x 110x 96x 96x 288x 206x 206x 96x 96x 96x 206x 206x 590x 576x 576x 3316x | import { memo, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import { useLocalStorage } from "usehooks-ts";
import {
ToggleGroup,
ToggleGroupItem,
} from "@/ahuora-design-system/ui/toggle-group";
import {
NAV_TABS,
NavTabParams,
NavTabPositions,
} from "./MainPageNavTabDefinitions";
function MainPageNavTabs() {
const nav = useNavigate();
const [currentPage, setCurrentPage] = useLocalStorage(
"current-page",
NavTabParams.home,
);
const onTabChange = useCallback(
(tab: NavTabParams) => {
if (tab === NavTabParams.logOut) {
return;
}
if (currentPage === tab) {
setCurrentPage(NavTabParams.home);
} else {
setCurrentPage(tab);
}
nav(`/${tab}`);
},
[currentPage, nav, setCurrentPage],
);
const handleLogOut = () => {
window.location.replace("/logout");
};
return (
<ToggleGroup
type="single"
className="w-full h-full flex flex-col items-center"
value={currentPage}
onValueChange={onTabChange}
>
<div className="w-full flex flex-col items-center gap-2 my-3">
{NAV_TABS.filter(
(tabItem) => tabItem.position === NavTabPositions.top,
).map((tabItem) => (
<TabItem
key={tabItem.id}
open={currentPage === tabItem.id}
icon={tabItem.icon}
label={tabItem.tooltipContent}
value={tabItem.id}
onClick={null}
/>
))}
</div>
<div className="w-[90%] mx-auto my-1 border-b-[1px] border-secondary"></div>
<div className="w-full flex flex-col items-center gap-2 my-3">
{NAV_TABS.filter(
(tabItem) => tabItem.position === NavTabPositions.second,
).map((tabItem) => (
<TabItem
key={tabItem.id}
open={currentPage === tabItem.id}
icon={tabItem.icon}
label={tabItem.tooltipContent}
value={tabItem.id}
onClick={null}
/>
))}
</div>
<div className="w-full flex flex-col items-center gap-2 mt-auto mb-5">
{NAV_TABS.filter(
(tabItem) => tabItem.position === NavTabPositions.bottom,
).map((tabItem) => (
<TabItem
key={tabItem.id}
open={currentPage === tabItem.id}
icon={tabItem.icon}
label={tabItem.tooltipContent}
value={tabItem.id}
onClick={handleLogOut}
/>
))}
</div>
</ToggleGroup>
);
}
const TabItem = ({ open, icon, label, value, onClick }) => (
<ToggleGroupItem
value={value}
aria-label={label}
className="w-[90%] py-5 flex flex-row items-center justify-start gap-5 font-normal rounded-lg"
data-state={open ? "on" : "off"}
onClick={onClick}
>
{icon} {label}
</ToggleGroupItem>
);
export default memo(MainPageNavTabs);
|