ticket

src/components/Tabs.tsx

@@ -1,20 +1,25 @@
 import { clx } from '@/helpers/utils'
-import { type FC } from 'react'
+import { type FC, type ReactNode } from 'react'
 
 type TabItem = {
     label: string
     value: string
+    icon?: ReactNode
 }
 
 type Props = {
     items: TabItem[]
-    activeTab: string
-    onTabChange: (tab: string) => void
+    active?: string
+    activeTab?: string
+    onChange?: (tab: string) => void
+    onTabChange?: (tab: string) => void
 }
 
 const Tabs: FC<Props> = (props) => {
 
-    const { items, activeTab, onTabChange } = props
+    const { items, activeTab, active, onTabChange, onChange } = props
+    const currentActive = active || activeTab || ''
+    const handleChange = onChange || onTabChange || (() => { })
 
 
     return (
@@ -23,10 +28,11 @@ const Tabs: FC<Props> = (props) => {
                 {
                     items.map((item) => {
                         return (
-                            <div onClick={() => onTabChange(item.value)} key={item.value} className={clx(
-                                'h-[32px] flex items-center justify-center w-[122px] cursor-pointer rounded-full',
-                                activeTab === item.value && 'bg-primary'
+                            <div onClick={() => handleChange(item.value)} key={item.value} className={clx(
+                                'h-[32px] flex items-center gap-2 justify-center min-w-[122px] px-3 cursor-pointer rounded-full',
+                                currentActive === item.value && 'bg-primary'
                             )}>
+                                {item.icon}
                                 {item.label}
                             </div>
                         )