503c29613b
- Introduced SKILL.md outlining the principles and processes for effective interface design. - Added critique.md for evaluating design outputs and ensuring craft over correctness. - Created example.md to illustrate the application of subtle layering principles in design decisions. - Developed principles.md detailing core craft principles for consistent design quality. - Implemented validation.md for memory management and pattern reuse in the design system. - Established system.md for the Playzer design system, defining direction, domain concepts, and design decisions. - Added StatusBadge component for displaying booking statuses with appropriate styles and labels. - Updated skills-lock.json to include the new interface-design skill.
50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
import { type LucideIcon } from 'lucide-react';
|
|
|
|
type StatusType = 'CONFIRMED' | 'PENDING' | 'CANCELLED' | 'NO_SHOW' | 'COMPLETED';
|
|
|
|
type StatusBadgeProps = {
|
|
status: StatusType;
|
|
label: string;
|
|
icon?: LucideIcon;
|
|
className?: string;
|
|
};
|
|
|
|
const statusStyles: Record<StatusType, string> = {
|
|
CONFIRMED: 'bg-status-confirmed-bg border-status-confirmed-border text-status-confirmed-text',
|
|
PENDING: 'bg-status-pending-bg border-status-pending-border text-status-pending-text',
|
|
CANCELLED: 'bg-status-cancelled-bg border-status-cancelled-border text-status-cancelled-text',
|
|
NO_SHOW: 'bg-status-noshow-bg border-status-noshow-border text-status-noshow-text',
|
|
COMPLETED: 'bg-status-completed-bg border-status-completed-border text-status-completed-text',
|
|
};
|
|
|
|
export function StatusBadge({ status, label, icon: Icon, className }: StatusBadgeProps) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium',
|
|
statusStyles[status],
|
|
className
|
|
)}
|
|
>
|
|
{Icon && <Icon className="size-3" />}
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function effectiveStatusClassName(
|
|
status: 'CONFIRMED' | 'CANCELLED' | 'COMPLETED' | 'NO_SHOW'
|
|
): string {
|
|
return statusStyles[status];
|
|
}
|
|
|
|
export function effectiveStatusLabel(
|
|
status: 'CONFIRMED' | 'CANCELLED' | 'COMPLETED' | 'NO_SHOW'
|
|
): string {
|
|
if (status === 'NO_SHOW') return 'No show';
|
|
if (status === 'COMPLETED') return 'Cumplida';
|
|
if (status === 'CANCELLED') return 'Cancelada';
|
|
return 'Confirmada';
|
|
}
|