Add Link

treely · Apr 28, 2024 · cb59dc9 · cb59dc9
1 parent ba12778
commit cb59dc9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 9 deletions.
diff --git a/src/components/LinkTabs/LinkTabs.stories.tsx b/src/components/LinkTabs/LinkTabs.stories.tsx
@@ -7,8 +7,8 @@ export default {
   component: LinkTabs,
   args: {
     tabs: [
-      { key: 'tab-1', title: 'Tab 1 Title', link: 'tree.ly' },
-      { key: 'tab-2', title: 'Tab 2 Title', link: 'example.com' },
+      { key: 'tab-1', title: 'Tab 1 Title', link: 'https://tree.ly/app/overview' },
+      { key: 'tab-2', title: 'Tab 2 Title', link: 'https://tree.ly/app/parcel-manager' },
     ],
   },
   children: <div>Tab Content</div>,

diff --git a/src/components/LinkTabs/LinkTabs.tsx b/src/components/LinkTabs/LinkTabs.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Flex } from '@chakra-ui/react';
+import { Box, Button, Flex, Link } from '@chakra-ui/react';
 import React, { FC, useMemo, useState } from 'react';
 
 export interface LinkTabsProps {
@@ -16,10 +16,9 @@ export const LinkTabs: FC<LinkTabsProps> = ({
 }: LinkTabsProps) => {
   const [activeTabKey, setActiveTabKey] = useState(initialTabKey || tabs[0].key);
 
-  const onClick = (newTabKey: string, link: string) => {
+  const onClick = (newTabKey: string) => {
     setActiveTabKey(newTabKey);
     onChange && onChange(newTabKey);
-    window.history.pushState(null, '', link);
   };
 
   const tab = useMemo(() => tabs.find((tab) => tab.key === activeTabKey), [tabs, activeTabKey]);
@@ -28,26 +27,26 @@ export const LinkTabs: FC<LinkTabsProps> = ({
     <Box>
       <Flex width="full" gap="8" overflowX="auto">
         {tabs.map((tab) => (
-          <Box key={tab.key}>
+          <Link key={tab.key} href={tab.link}>
             <Button
               variant="link"
               color="primary.800"
               fontWeight="bold"
               pb="2"
-              onClick={() => onClick(tab.key, tab.link)}
+              onClick={() => onClick(tab.key)}
               cursor="pointer"
             >
               {tab.title}
             </Button>
             {tab.key === activeTabKey && (
               <Box backgroundColor="primary.700" borderTopRadius="full" height="3px" />
             )}
-          </Box>
+          </Link>
         ))}
       </Flex>
 
       <Box color="gray.200" borderTop="1px" mt="-1px" />
-      {tab && <Box mt="2">{children}</Box>}
+      {tab && {children}</Box>}
     </Box>
   );
 };