Files
pn-new-crm/src/components/ui/status-pill.tsx
Matt Ciaccio 8699f81879
Some checks failed
Build & Push Docker Images / lint (push) Failing after 1m18s
Build & Push Docker Images / build-and-push (push) Has been skipped
chore(style): codebase em-dash sweep + minor layout polish
Replaces every em-dash and en-dash with regular ASCII hyphens
across comments, JSX strings, and dev-facing logs. Mostly cosmetic
but stops the inconsistent mix that crept in over the last few
months (some files used em-dashes in comments, others didn't,
some used both).

Bundles two small dashboard-layout tweaks that touch a couple of
already-modified files:
- (dashboard)/layout.tsx main padding goes from p-6 to pt-3 px-6
  pb-6 so page content sits closer to the topbar.
- Sidebar now receives the ports list it needs for the footer
  port switcher.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-04 22:57:01 +02:00

56 lines
2.2 KiB
TypeScript

import { cva, type VariantProps } from 'class-variance-authority';
import * as React from 'react';
import { cn } from '@/lib/utils';
/**
* Status pill - a single visual primitive for "this thing is in state X" across
* documents, signers, reservations, interests. Replaces ad-hoc Badge variants
* sprinkled through detail pages so the colour mapping stays consistent.
*/
const statusPillVariants = cva(
'inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition-colors',
{
variants: {
status: {
// Document/signer lifecycle
pending: 'border-slate-200 bg-slate-100 text-slate-700',
sent: 'border-brand-100 bg-brand-50 text-brand-700',
partial: 'border-teal-light bg-teal-light/40 text-teal-dark',
signed: 'border-success-border bg-success-bg text-success',
completed: 'border-success-border bg-success-bg text-success',
expired: 'border-warning-border bg-warning-bg text-warning',
rejected: 'border-error-border bg-error-bg text-error',
cancelled: 'border-slate-300 bg-slate-200 text-slate-600',
declined: 'border-error-border bg-error-bg text-error',
// Reservation / interest lifecycle
active: 'border-success-border bg-success-bg text-success',
archived: 'border-slate-200 bg-slate-100 text-slate-500',
// Delivered (non-signature docs in hub)
delivered: 'border-purple-light bg-purple-light/40 text-purple-dark',
draft: 'border-slate-200 bg-white text-slate-600',
},
},
defaultVariants: {
status: 'pending',
},
},
);
export type StatusPillStatus = NonNullable<VariantProps<typeof statusPillVariants>['status']>;
interface StatusPillProps
extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof statusPillVariants> {
/** Optional leading dot - useful for "in-progress" style indicators. */
withDot?: boolean;
}
export function StatusPill({ status, withDot, className, children, ...props }: StatusPillProps) {
return (
<span className={cn(statusPillVariants({ status }), className)} {...props}>
{withDot ? <span className="h-1.5 w-1.5 rounded-full bg-current" aria-hidden /> : null}
{children}
</span>
);
}