From 151280a39792f298e1f703d01b2472bb392e6510 Mon Sep 17 00:00:00 2001
From: lialila <uche0790@gmail.com>
Date: Sat, 27 Apr 2024 16:09:31 +0300
Subject: [PATCH] Add LinsTabs

---
 src/components/LinkTabs/LinkTabs.stories.tsx |  5 ++--
 src/components/LinkTabs/LinkTabs.tsx         | 25 +++++++++++---------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/LinkTabs/LinkTabs.stories.tsx b/src/components/LinkTabs/LinkTabs.stories.tsx
index 9e31367..e0a6ca6 100644
--- a/src/components/LinkTabs/LinkTabs.stories.tsx
+++ b/src/components/LinkTabs/LinkTabs.stories.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
-
 import { LinkTabs } from './LinkTabs';
 
 export default {
@@ -8,8 +7,8 @@ export default {
   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>;
diff --git a/src/components/LinkTabs/LinkTabs.tsx b/src/components/LinkTabs/LinkTabs.tsx
index 4fc36a1..8e95b43 100644
--- a/src/components/LinkTabs/LinkTabs.tsx
+++ b/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>
         ))}