4892099eaa
- Add aria-label to search input, category/status dropdowns in ProductsTab - Add aria-label with item name to Edit/Delete icon buttons - Add title tooltip to truncated product descriptions - Add price validation in ProductModal (min=1, reject 0 with inline error) - Add focus-visible ring to all sidebar nav buttons and links - Improve StatusBadge contrast: text-amber-700 to text-amber-800 (WCAG AA) - Add unit annotation (tr = trieu dong VND) to revenue chart subtitles Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
21 lines
578 B
TypeScript
21 lines
578 B
TypeScript
import type { StatusBadgeProps } from "./Manager.types";
|
|
|
|
export default function StatusBadge({ available }: StatusBadgeProps) {
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${
|
|
available
|
|
? "bg-emerald-100 text-emerald-700"
|
|
: "bg-amber-100 text-amber-800"
|
|
}`}
|
|
>
|
|
<span
|
|
className={`h-1.5 w-1.5 rounded-full ${
|
|
available ? "bg-emerald-500" : "bg-amber-500"
|
|
}`}
|
|
/>
|
|
{available ? "Còn hàng" : "Tạm hết"}
|
|
</span>
|
|
);
|
|
}
|