statuscomponent

src/components/Status.tsx

@@ -0,0 +1,33 @@
+import { type FC } from 'react'
+import { clx } from '@/helpers/utils'
+
+type StatusVariant = 'success' | 'error' | 'warning' | 'info' | 'pending' | 'active' | 'inactive'
+
+type Props = {
+    variant: StatusVariant
+    label: string
+}
+
+const Status: FC<Props> = ({ variant, label }) => {
+    const variantStyles: Record<StatusVariant, string> = {
+        success: 'bg-green-100 text-green-600',
+        error: 'bg-red-100 text-red-600',
+        warning: 'bg-yellow-100 text-yellow-600',
+        info: 'bg-blue-100 text-blue-600',
+        pending: 'bg-gray-100 text-gray-600',
+        active: 'bg-green-100 text-green-600',
+        inactive: 'bg-gray-100 text-gray-400',
+    }
+
+    return (
+        <div className={clx(
+            'w-fit py-1 px-2 text-xs h-fit rounded-full',
+            variantStyles[variant]
+        )}>
+            {label}
+        </div>
+    )
+}
+
+export default Status
+

src/pages/food/components/FoodTableColumns.tsx

@@ -2,6 +2,7 @@ import { Eye } from 'iconsax-react'
 import type { ColumnType } from '@/components/types/TableTypes'
 import type { Food } from '../types/Types'
 import { formatPrice, formatTime } from '../utils/formatters'
+import Status from '@/components/Status'
 
 export const getFoodTableColumns = (): ColumnType<Food>[] => {
     return [
@@ -55,13 +56,7 @@ export const getFoodTableColumns = (): ColumnType<Food>[] => {
             title: 'وضعیت',
             render: (item: Food) => {
                 return (
-                    <div className={`h-6 w-fit flex items-center rounded-full px-2.5 text-xs ${
-                        item.isActive 
-                            ? 'bg-[#FFEDCA] text-[#FF7B00]' 
-                            : 'bg-gray-200 text-gray-600'
-                    }`}>
-                        {item.isActive ? 'فعال' : 'غیرفعال'}
-                    </div>
+                    <Status variant={item.isActive ? 'success' : 'error'} label={item.isActive ? 'فعال' : 'غیرفعال'} />
                 )
             }
         },