BIN
src/app/favicon.ico
Normal file
BIN
src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
60
src/widgets/detail/paidStatus.tsx
Normal file
60
src/widgets/detail/paidStatus.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user