feat(LinkTabs): Create the component

src/components/LinkTabs/LinkTabs.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { LinkTabs } from './LinkTabs';
+
+export default {
+  title: 'components/LinkTabs',
+  component: LinkTabs,
+  args: {
+    tabs: [
+      { key: 'tab-1', title: 'Tab 1 Title', link: 'example.com' },
+      { key: 'tab-2', title: 'Tab 2 Title', link: 'example.com' },
+    ],
+  },
+} as Meta<typeof LinkTabs>;
+
+const Template: StoryFn<typeof LinkTabs> = (args) => <LinkTabs {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {};

src/components/LinkTabs/LinkTabs.tsx

@@ -0,0 +1,41 @@
+import { Box, Button, Flex } from '@chakra-ui/react';
+import React, { FC, useState } from 'react';
+
+export interface LinkTabsProps {
+  tabs: { key: string; title: string; link: string }[];
+  onChange: (activeTabKey: string) => void;
+}
+
+export const LinkTabs: FC<LinkTabsProps> = ({ tabs, onChange }: LinkTabsProps) => {
+  const [activeTabKey, setActiveTabKey] = useState(tabs[0].key);
+
+  const onClick = (newTabKey: string, link: string) => {
+    setActiveTabKey(newTabKey);
+    onChange && onChange(newTabKey);
+    window.history.pushState(null, '', link);
+  };
+
+  return (
+    <Box>
+      <Flex width="full" gap="8" overflowX="auto">
+        {tabs.map((tab) => (
+          <Box key={tab.key}>
+            <Button
+              variant="link"
+              color="primary.800"
+              fontWeight="bold"
+              pb="2"
+              onClick={() => onClick(tab.key, tab.link)}
+              cursor="pointer"
+            >
+              {tab.title}
+            </Button>
+            {tab.key === activeTabKey && (
+              <Box backgroundColor="primary.700" borderTopRadius="full" height="3px" />
+            )}
+          </Box>
+        ))}
+      </Flex>
+    </Box>
+  );
+};

src/components/LinkTabs/index.ts

@@ -0,0 +1 @@
+export { LinkTabs } from './LinkTabs';

src/index.tsx

@@ -16,6 +16,7 @@ export * from './components/ImageRadioGroup';
 export * from './components/LabelNumberPair';
 export * from './components/LabelTextPair';
 export * from './components/Layout';
+export * from './components/LinkTabs';
 export * from './components/BoemlyList';
 export * from './components/BoemlyModal';
 export * from './components/MobileMenuBurger';