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
+