Allow Icon for tag

src/components/Tabs/Tabs.tsx

@@ -2,11 +2,15 @@ import { ComponentType } from "react";
 import "./tabs.css";
 import { classnames } from "../utils/classnames";
 
-type Props = {
-  tabs: {
+export type TabProps = {
   label: string;
+  className?: string;
   Icon?: ComponentType;
-  }[];
+  IconAfter?: ComponentType<{ onClick?: () => void }>;
+};
+
+type Props = {
+  tabs: TabProps[];
 
   onTabChange: (index: number) => void | Promise<void>;
 
@@ -24,12 +28,14 @@ export function Tabs({ tabs, onTabChange, tabIndex }: Props) {
           key={tab.label}
           className={classnames(
             ["tabs-tab"],
-            ["tabs-tab--active", tabIndex === index]
+            ["tabs-tab--active", tabIndex === index],
+            [tab.className || ""]
           )}
           onClick={() => onTabChange(index)}
         >
           {tab.Icon && <tab.Icon />}
           <span>{tab.label}</span>
+          {tab.IconAfter && <tab.IconAfter />}
         </div>
       ))}
     </div>

src/index.ts

@@ -31,6 +31,6 @@ export { Tooltip } from "./components/Tooltip/Tooltip";
 export { Collapse } from "./components/Collapse/Collapse";
 export { Placeholder } from "./components/Placeholder/Placeholder";
 export { Sheets } from "./components/Sheets/Sheets";
-export { Tabs } from "./components/Tabs/Tabs";
+export { Tabs, type TabProps } from "./components/Tabs/Tabs";
 export * from "./components/Stepper/useStepperReducer";
 export { Modal } from "./components/Modal/Modal";