Refactor Tabs with Context and types support

src/components/ui/Tabs/context/TabsContext.tsx

@@ -0,0 +1,5 @@
+import {createContext} from 'react';
+
+const TabRootContext = createContext(null);
+
+export default TabRootContext;

src/components/ui/Tabs/segments/TabContent.tsx

@@ -1,13 +1,13 @@
 'use client';
 import React from 'react';
 import {customClassSwitcher} from '~/core';
-import {Tab} from '../types';
+import {TabProps} from '../types';
 const COMPONENT_NAME = 'TabContent';
 
 
 export type TabContentProps ={
-    tabs?: Tab[]
-    activeTab: Tab
+    tabs?: TabProps[]
+    activeTab: TabProps
     className?: string;
     customRootClass?: string;
 }

src/components/ui/Tabs/segments/TabList.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import {customClassSwitcher} from '~/core';
 import TabTrigger from './TabTrigger';
-import {Tab} from '../types';
+import {TabProps} from '../types';
 
 const COMPONENT_NAME = 'TabList';
 
@@ -12,7 +12,7 @@ export type TabListProps = {
     className?: string;
     customRootClass?: string;
     setActiveTab: React.Dispatch<Tab>;
-    activeTab: Tab;
+    activeTab: TabProps;
 }
 
 const TabList = ({tabs = [], className='', customRootClass='', setActiveTab, activeTab}: TabListProps) => {

src/components/ui/Tabs/segments/TabRoot.tsx

@@ -3,25 +3,21 @@
 import React from 'react';
 import {customClassSwitcher} from '~/core';
 
-const COMPONENT_NAME = 'TabRoot';
+import TabsContext from '../context/TabsContext';
 
+import {TabRootProps} from '../types';
+
+const COMPONENT_NAME = 'Tabs';
 
-export type TabRootProps = {
-    children: React.ReactNode;
-    customRootClass?: string;
-    className?: string;
-    color?: string;
-    props?: Record<string, any>[];
-}
 
 const TabRoot = ({children, customRootClass, className, color, ...props}: TabRootProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-
-
     return (
-        <div className={`${rootClass} ${className}`} data-accent-color={color} {...props} >
-            {children}
-        </div>
+        <TabsContext.Provider value={null}>
+            <div className={`${rootClass} ${className}`} data-accent-color={color} {...props} >
+                {children}
+            </div>
+        </TabsContext.Provider>
     );
 };
 

src/components/ui/Tabs/segments/TabTrigger.tsx

@@ -1,14 +1,14 @@
 'use client';
 import React from 'react';
 import {customClassSwitcher} from '~/core';
-import {Tab} from '../types';
+import {TabProps} from '../types';
 
 const COMPONENT_NAME = 'TabTrigger';
 
 export type TabTriggerProps = {
-    tab: Tab;
+    tab: TabProps;
     setActiveTab: React.Dispatch<Tab>;
-    activeTab: Tab;
+    activeTab: TabProps;
     className?: string;
     customRootClass?: string;
     index: number;
@@ -25,7 +25,10 @@ const TabTrigger = ({tab, setActiveTab, activeTab, className, customRootClass, i
     };
 
     return (
-        <button role="tab" key={index} className={`${rootClass} ${isActive?'active':''} ${className}`} {...props} onClick={() => handleClick(tab)}>
+        <button
+            role="tab" key={index} className={`${rootClass} ${isActive?'active':''} ${className}`} {...props} onKeyDown={(e) => {
+                console.log(e.key);
+            }} onClick={() => handleClick(tab)}>
             <span className={`${rootClass}-inner`}>
                 {tab.label}
             </span>

src/components/ui/Tabs/types/TabProps.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+type TabProps ={
+    label: string;
+    value: string;
+    content: React.ReactNode;
+}
+
+export default TabProps;

src/components/ui/Tabs/types/TabRootProps.tsx

@@ -0,0 +1,11 @@
+type TabRootProps = {
+    children: React.ReactNode;
+    customRootClass?: string;
+    className?: string;
+    color?: string;
+    props?: Record<string, any>[];
+    tabs: [];
+    activeTab: any
+}
+
+export default TabRootProps;

src/components/ui/Tabs/types/index.tsx

@@ -0,0 +1,5 @@
+import TabRootProps from './TabRootProps';
+import TabProps from './TabProps';
+
+
+export type {TabRootProps, TabProps};