Status Indicator
Colour-coded dot with a status label. Maps a string status to a colour and animates a slow ping ring. Hide the label for a pure dot.
Default
Dot plus label, colour derived from the status string.
Usage
Import the parts you need from the component's folder.
ts
import { StatusIndicator } from "@/components/ui/status-indicator";Status values
Available statuses: Available (green), Coming soon / Upcoming / Maintenance (yellow), Sold out / Unavailable (red). Toggle show-status-label off for a pure dot.