refactor: alternative header (#269)

Author: snqb

src/components/alternative-header/AlternativeHeader.stories.tsx

@@ -0,0 +1,78 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import React, { useMemo, useState } from 'react';
+import { Box } from 'rebass';
+import Value from '../typography/value';
+import { AlternativeHeader, AlternativeHeaderProps } from './AlternativeHeader';
+
+export default {
+  title: 'Quartz/AlternativeHeader',
+  component: AlternativeHeader,
+} as Meta;
+
+const Template: Story<AlternativeHeaderProps> = (props) => {
+  const [active, setActive] = useState('tab');
+
+  const tabs = useMemo(
+    () => [
+      {
+        title: 'tab',
+        isActive: active === 'tab',
+        onClick: () => setActive('tab'),
+      },
+      {
+        title: 'another tab',
+        isActive: active === 'another tab',
+        onClick: () => setActive('another tab'),
+      },
+      {
+        title: 'one more tab',
+        isActive: active === 'one more tab',
+        onClick: () => setActive('one more tab'),
+      },
+      {
+        title: 'last tab',
+        isActive: active === 'last tab',
+        altContent: (
+          <Value as="span" lineHeight="13px">
+            altContent
+          </Value>
+        ),
+        onClick: () => setActive('last tab'),
+      },
+    ],
+    [active],
+  );
+
+  return (
+    <Box overflow="hidden" minHeight="200px">
+      <AlternativeHeader {...props} tabs={tabs} />
+    </Box>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  title: 'Cluster settings',
+};
+
+Default.argTypes = {
+  title: {
+    summary: 'Title',
+    control: {
+      type: 'text',
+    },
+  },
+  tabs: {
+    summary: 'Tabs of header',
+    control: {
+      type: 'object',
+    },
+  },
+  withBase: {
+    summary: 'Adds a line under the menu',
+    control: {
+      type: 'boolean',
+    },
+  },
+};

src/components/alternative-header/AlternativeHeader.tsx

@@ -0,0 +1,78 @@
+import React, { FC, useMemo } from 'react';
+import { Box, BoxProps, Flex } from 'rebass';
+import Value from '../typography/value';
+import * as S from './styles';
+
+export interface Tab {
+  title: string;
+  altContent?: React.ReactElement | null;
+  isActive: boolean;
+  onClick: () => void;
+}
+
+export interface AlternativeHeaderProps extends Omit<BoxProps, 'css'> {
+  title?: string;
+  tabs: Tab[];
+  withBase?: boolean;
+}
+
+export const AlternativeHeader: FC<AlternativeHeaderProps> = ({
+  title,
+  tabs,
+  withBase,
+  ...props
+}: AlternativeHeaderProps) => {
+  const activeTabIndex = useMemo(() => {
+    const index = tabs.findIndex(({ isActive }) => isActive);
+
+    return index < 0 ? 0 : index;
+  }, [tabs]);
+
+  return (
+    <Flex sx={S.wrapper(Boolean(title))} {...props}>
+      <Flex justifyContent="space-between" width="100%" height="fit-content">
+        <Value fontSize="20px" fontFamily="Inter" fontWeight="bold">
+          {title && title}
+        </Value>
+      </Flex>
+
+      <Flex
+        width="100%"
+        mt="25px"
+        justifyContent="space-between"
+        sx={{ position: 'relative' }}
+      >
+        {withBase && <Flex sx={S.base} />}
+        <Flex>
+          {tabs.map((tab, index) => (
+            <Box
+              onClick={tab.onClick}
+              key={tab.title}
+              sx={S.tab(activeTabIndex === index)}
+            >
+              <Flex alignItems="baseline" pb="10px">
+                <Value fontFamily="Inter">{tab.title}</Value>
+                {React.isValidElement(tab.altContent) && (
+                  <Flex ml="10px">
+                    <Flex
+                      as="span"
+                      variant="light"
+                      alignItems="center"
+                      tx="variants.badges.primary"
+                      justifyContent="center"
+                      px="4px"
+                      py="2px"
+                      sx={{ borderRadius: '1px' }}
+                    >
+                      {tab.altContent}
+                    </Flex>
+                  </Flex>
+                )}
+              </Flex>
+            </Box>
+          ))}
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};