Reservation statushospitality
Lodging reservation lifecycle statuses preset with tones, a badge and a bucket helper.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/reservation-status의존 아이템localestatus-badgestyle
Default
reservation-status-demo.tsx
import { RESERVATION_STATUSES, ReservationStatusBadge, reservationBucket } from "@/components/ui/reservation-status";
export default function ReservationStatusDemo() { return ( <ul className="flex flex-col gap-2"> {[...RESERVATION_STATUSES, "archived"].map((status) => ( <li key={status} className="flex items-center gap-3 text-sm"> <ReservationStatusBadge status={status} size="md" /> <span className="text-muted-foreground">{reservationBucket(status) ?? "unknown"}</span> </li> ))} </ul> );}