Add files via upload

src/ui/Tabbar/TabBar.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+import React from 'react';
+
+import clsx from 'clsx';
+
+import style from './TabBar.module.css';
+import { TabBarItemProps } from './tabbarItem/TabBarItem';
+import TabBarNav from './TabBarNav';
+
+interface TabBarProps {
+  children: React.ReactNode;
+  className?: string;
+  activeTab: string;
+  setActiveTab: (label: string) => void;
+}
+
+const TabBar: React.FC<TabBarProps> = ({
+  children, className = '', activeTab, setActiveTab,
+}) => {
+  const getChildrenLabels = (children: React.ReactNode): string[] => React.Children.toArray(children)
+    .filter(React.isValidElement)
+    .map((child) => (child.props as any).label);
+
+  const handleChangeActiveTab = (label: string) => {
+    setActiveTab(label);
+  };
+
+  const renderTabs = () => {
+    const childrenLabels = getChildrenLabels(children);
+
+    return childrenLabels.map((navLabel) => (
+      <TabBarNav
+        key={navLabel}
+        navLabel={navLabel}
+        className={clsx({ [style.active]: activeTab === navLabel })}
+        onChangeActiveTab={handleChangeActiveTab}
+      />
+    ));
+  };
+
+  const classes = clsx(style.tabBar, className);
+
+  return (
+    <div className={classes}>
+      <div className={style.tabBarNav}>{renderTabs()}</div>
+      <div className={style.tabContainer}>
+        {React.Children.map(
+          children,
+          (child) => (React.isValidElement(child) ? React.cloneElement(child, { activeTab } as TabBarItemProps) : null),
+        )
+        }
+      </div>
+    </div>
+  );
+};
+
+export default TabBar;