fix(striker-ui): add custom tab-related components

striker-ui/components/Tab.tsx

@@ -0,0 +1,40 @@
+import {
+  Tab as MUITab,
+  tabClasses as muiTabClasses,
+  TabProps as MUITabProps,
+} from '@mui/material';
+import { FC, useMemo } from 'react';
+
+import { BLUE, BORDER_RADIUS, GREY } from '../lib/consts/DEFAULT_THEME';
+
+import { BodyText } from './Text';
+
+const Tab: FC<MUITabProps> = ({ label: originalLabel, ...restTabProps }) => {
+  const label = useMemo(
+    () =>
+      typeof originalLabel === 'string' ? (
+        <BodyText inheritColour>{originalLabel}</BodyText>
+      ) : (
+        originalLabel
+      ),
+    [originalLabel],
+  );
+
+  return (
+    <MUITab
+      {...restTabProps}
+      label={label}
+      sx={{
+        borderRadius: BORDER_RADIUS,
+        color: GREY,
+        textTransform: 'none',
+
+        [`&.${muiTabClasses.selected}`]: {
+          color: BLUE,
+        },
+      }}
+    />
+  );
+};
+
+export default Tab;

striker-ui/components/TabContent.tsx

@@ -0,0 +1,16 @@
+import { ReactElement, useMemo } from 'react';
+
+const TabContent = <T,>({
+  changingTabId,
+  children,
+  tabId,
+}: TabContentProps<T>): ReactElement => {
+  const isTabIdMatch = useMemo(
+    () => changingTabId === tabId,
+    [changingTabId, tabId],
+  );
+
+  return <>{isTabIdMatch && children}</>;
+};
+
+export default TabContent;

striker-ui/components/Tabs.tsx

@@ -0,0 +1,26 @@
+import {
+  Tabs as MUITabs,
+  tabsClasses as muiTabsClasses,
+  TabsProps as MUITabsProps,
+} from '@mui/material';
+import { FC } from 'react';
+
+import { BLUE, BORDER_RADIUS } from '../lib/consts/DEFAULT_THEME';
+
+const Tabs: FC<MUITabsProps> = ({
+  variant = 'fullWidth',
+  ...restTabsProps
+}) => (
+  <MUITabs
+    {...restTabsProps}
+    variant={variant}
+    sx={{
+      [`& .${muiTabsClasses.indicator}`]: {
+        backgroundColor: BLUE,
+        borderRadius: BORDER_RADIUS,
+      },
+    }}
+  />
+);
+
+export default Tabs;

striker-ui/types/TabContent.d.ts

@@ -0,0 +1,4 @@
+type TabContentProps<T> = import('react').PropsWithChildren<{
+  changingTabId: T;
+  tabId: T;
+}>;