[Dashboards] - Tabs reordering (#14798)

closes https://github.com/twentyhq/core-team-issues/issues/1544

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-ui/src/input/button/components/TabButton/TabButton.tsx

@@ -0,0 +1,61 @@
+import { type IconComponent } from '@ui/display';
+import { StyledTabButton } from '@ui/input/button/components/TabButton/internals/components/StyledTabBase';
+import { TabContent } from '@ui/input/button/components/TabButton/internals/components/TabContent';
+import { type ReactElement } from 'react';
+import { Link } from 'react-router-dom';
+
+type TabButtonProps = {
+  id: string;
+  active?: boolean;
+  disabled?: boolean;
+  to?: string;
+  LeftIcon?: IconComponent;
+  className?: string;
+  title?: string;
+  onClick?: () => void;
+  logo?: string;
+  RightIcon?: IconComponent;
+  pill?: string | ReactElement;
+  contentSize?: 'sm' | 'md';
+  disableTestId?: boolean;
+};
+
+export const TabButton = ({
+  id,
+  active,
+  disabled,
+  to,
+  LeftIcon,
+  className,
+  title,
+  onClick,
+  logo,
+  RightIcon,
+  pill,
+  contentSize = 'sm',
+  disableTestId = false,
+}: TabButtonProps) => {
+  return (
+    <StyledTabButton
+      data-testid={disableTestId ? undefined : `tab-${id}`}
+      active={active}
+      disabled={disabled}
+      as={to ? Link : 'button'}
+      to={to}
+      className={className}
+      onClick={onClick}
+    >
+      <TabContent
+        id={id}
+        active={active}
+        disabled={disabled}
+        LeftIcon={LeftIcon}
+        title={title}
+        logo={logo}
+        RightIcon={RightIcon}
+        pill={pill}
+        contentSize={contentSize}
+      />
+    </StyledTabButton>
+  );
+};