Files
frontend/components/organisms/manager/StatusBadge.tsx
T
Thanh Quy - wolf 4892099eaa fix: Address UI/UX accessibility and usability issues from test report
- 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>
2026-04-18 10:54:52 +07:00

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>
);
}