Add LinsTabs

src/components/LinkTabs/LinkTabs.stories.tsx

@@ -1,15 +1,14 @@
 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' },
-      { key: 'tab-2', title: 'Tab 2 Title' },
+      { key: 'tab-1', title: 'Tab 1 Title', link: 'example.com' },
+      { key: 'tab-2', title: 'Tab 2 Title', link: 'example.com' },
     ],
   },
 } as Meta<typeof LinkTabs>;

src/components/LinkTabs/LinkTabs.tsx

@@ -1,34 +1,37 @@
 import { Box, Button, Flex } from '@chakra-ui/react';
-import React, { FC, useMemo, useState } from '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) => {
+  const onClick = (newTabKey: string, link: string) => {
     setActiveTabKey(newTabKey);
     onChange && onChange(newTabKey);
+    window.history.pushState(null, '', link);
   };
 
-  const tab = useMemo(() => tabs.find((tab) => tab.key === activeTabKey), [tabs, activeTabKey]);
   return (
     <Box>
       <Flex width="full" gap="8" overflowX="auto">
         {tabs.map((tab) => (
           <Box key={tab.key}>
-            <Button variant="link" onClick={() => onClick(tab.link)}>
+            <Button
+              variant="link"
+              color="primary.800"
+              fontWeight="bold"
+              pb="2"
+              onClick={() => onClick(tab.key, tab.link)}
+              cursor="pointer"
+            >
               {tab.title}
             </Button>
-            {activeTabKey === tab.key && (
-              <Box
-                data-testid="tabBottonIndicator"
-                backgroundColor="primary.700"
-                borderTopRadius="full"
-                height="3px"
-              />
+            {tab.key === activeTabKey && (
+              <Box backgroundColor="primary.700" borderTopRadius="full" height="3px" />
             )}
           </Box>
         ))}