school-dashboard-exercise/src/Components/Layout/Tabs/TabsBar.tsx
2024-06-23 12:16:01 +03:00

34 lines
860 B
TypeScript

import React from "react";
import { useModalTabsState } from "../../../zustand/ModalTabsState";
const TabsBar = ({ steps }: any) => {
const { ActiveTab, setActiveTab } = useModalTabsState((state) => state);
function handleTabClick(index: number) {
// setActiveTab(index);
}
return (
<div className="ModelBodyTabs">
{steps?.map(
(step: any, index: any) =>
!step.hidden && (
<div
onClick={() => handleTabClick(index)}
className={`ModelBodyTab ${ActiveTab === index ? "activeModeltab" : ""}`}
key={index}
>
<div>{index + 1}</div>
<span>
<h6>{step.title}</h6>
<h4>{step.description}</h4>
</span>
</div>
),
)}
</div>
);
};
export default TabsBar;