vercel error fixed

src/widgets/detail/paidStatus.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { useLocale } from 'next-intl'; // or your i18n library that exposes `locale`
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+type PaymentStatusValue = 'paid' | 'unpaid';
+
+interface PaymentStatusProps {
+  status: PaymentStatusValue;
+}
+
+// ─── Translations ─────────────────────────────────────────────────────────────
+const translations: Record<string, Record<PaymentStatusValue, string>> = {
+  uz: {
+    paid: "To'langan",
+    unpaid: "To'lanmagan",
+  },
+  ru: {
+    paid: 'Оплачено',
+    unpaid: 'Не оплачено',
+  },
+  en: {
+    paid: 'Paid',
+    unpaid: 'Unpaid',
+  },
+};
+
+// ─── Component ────────────────────────────────────────────────────────────────
+export default function PaymentStatus({ status }: PaymentStatusProps) {
+  const locale = useLocale(); // reads "locale" key from your i18n library
+  const lang = translations[locale] ?? translations['en'];
+  const label = lang[status];
+
+  const isPaid = status === 'paid';
+
+  return (
+    <span
+      className={[
+        // base
+        'inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-semibold',
+        'select-none whitespace-nowrap ',
+        // paid  → emerald
+        isPaid
+          ? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200'
+          : // unpaid → rose
+            'bg-rose-50 text-rose-600 ring-1 ring-rose-200 hover:cursor-pointer',
+      ].join(' ')}
+      aria-label={label}
+    >
+      {/* dot indicator */}
+      <span
+        className={[
+          'inline-block w-1.5 h-1.5 rounded-full',
+          isPaid ? 'bg-emerald-500' : 'bg-rose-500',
+        ].join(' ')}
+      />
+      {label}
+    </span>
+  );
+}