add new varaint to Tabs

Author: amit-ksh

src/@chakra-ui/gatsby-plugin/components/Tabs.ts

@@ -0,0 +1,32 @@
+import type { ComponentStyleConfig } from "@chakra-ui/theme"
+
+export const Tabs: ComponentStyleConfig = {
+  variants: {
+    primary: {
+      tab: {
+        borderTopRadius: "0.3rem",
+        borderBottom: "1px solid",
+        borderBottomColor: "primary",
+        px: 4,
+        py: "0.3rem",
+        _selected: {
+          color: "background",
+          bg: "primary",
+        },
+      },
+      tabpanels: {
+        mt: 4,
+      },
+      tabpanel: {
+        p: 6,
+        bg: "ednBackground",
+        border: "1px solid",
+        borderColor: "lightBorder",
+        borderRadius: "lg",
+      },
+    },
+  },
+  defaultProps: {
+    variant: "primary",
+  },
+}

src/@chakra-ui/gatsby-plugin/components/index.ts

@@ -3,11 +3,13 @@ import { Link } from "./Link"
 import { Tag } from "./Tag"
 import { Modal } from "./Modal"
 import { Checkbox } from "./Checkbox"
+import { Tabs } from "./Tabs"
 
 export default {
   Button,
   Link,
   Tag,
   Modal,
   Checkbox,
+  Tabs,
 }

src/components/Tabs.tsx

@@ -25,35 +25,17 @@ const Tabs: React.FC<IProps> = ({ tabs, onTabClick }) => {
   }
 
   return (
-    <ChakraTabs as="nav" variant="unstyled">
+    <ChakraTabs as="nav">
       <TabList>
         {tabs.map((tab, index) => (
-          <Tab
-            key={index}
-            px={4}
-            py="0.3rem"
-            borderBottom="1px solid"
-            borderColor="primary"
-            borderTopRadius="0.3rem"
-            _selected={{ color: "background", bg: "primary" }}
-            onClick={() => handleTabClick(index)}
-          >
+          <Tab key={index} onClick={() => handleTabClick(index)}>
             {tab.title}
           </Tab>
         ))}
       </TabList>
-      <TabPanels as="main" mt={4}>
+      <TabPanels as="main">
         {tabs.map((tab, index) => (
-          <TabPanel
-            key={index}
-            p={6}
-            bg="ednBackground"
-            border="1px solid"
-            borderColor="lightBorder"
-            borderRadius="lg"
-          >
-            {tab.content}
-          </TabPanel>
+          <TabPanel key={index}>{tab.content}</TabPanel>
         ))}
       </TabPanels>
     </ChakraTabs>