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