diff --git a/striker-ui/components/Tab.tsx b/striker-ui/components/Tab.tsx new file mode 100644 index 00000000..75b72365 --- /dev/null +++ b/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 = ({ label: originalLabel, ...restTabProps }) => { + const label = useMemo( + () => + typeof originalLabel === 'string' ? ( + {originalLabel} + ) : ( + originalLabel + ), + [originalLabel], + ); + + return ( + + ); +}; + +export default Tab; diff --git a/striker-ui/components/TabContent.tsx b/striker-ui/components/TabContent.tsx new file mode 100644 index 00000000..1b9a593f --- /dev/null +++ b/striker-ui/components/TabContent.tsx @@ -0,0 +1,16 @@ +import { ReactElement, useMemo } from 'react'; + +const TabContent = ({ + changingTabId, + children, + tabId, +}: TabContentProps): ReactElement => { + const isTabIdMatch = useMemo( + () => changingTabId === tabId, + [changingTabId, tabId], + ); + + return <>{isTabIdMatch && children}; +}; + +export default TabContent; diff --git a/striker-ui/components/Tabs.tsx b/striker-ui/components/Tabs.tsx new file mode 100644 index 00000000..bbbc6d6b --- /dev/null +++ b/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 = ({ + variant = 'fullWidth', + ...restTabsProps +}) => ( + +); + +export default Tabs; diff --git a/striker-ui/types/TabContent.d.ts b/striker-ui/types/TabContent.d.ts new file mode 100644 index 00000000..ed031541 --- /dev/null +++ b/striker-ui/types/TabContent.d.ts @@ -0,0 +1,4 @@ +type TabContentProps = import('react').PropsWithChildren<{ + changingTabId: T; + tabId: T; +}>;