mirror of
https://github.com/hanzoai/sign.git
synced 2026-10-21 01:21:51 +00:00
zooqueen
f31a87bf93
State now reads through shape, weight and tone rather than hue: the active editor step and selected file carry a filled mark and heavier label, recipients are told apart by six neutral tones, and status icons lean on the clock/check/file glyphs they already draw. Red stays as the one accent, reserved for destructive and rejected. Drops the unreferenced --new-* ramps and the dawn/water scales, points the stock Tailwind ring at --ring, and desaturates the sign scale so the PDF certificate, audit log and email templates match the app.
86 lines
2.1 KiB
TypeScript
86 lines
2.1 KiB
TypeScript
import type { HTMLAttributes } from 'react';
|
|
|
|
import type { MessageDescriptor } from '@lingui/core';
|
|
import { msg } from '@lingui/core/macro';
|
|
import { useLingui } from '@lingui/react';
|
|
import { CheckCircle2, Clock, File, XCircle } from 'lucide-react';
|
|
import type { LucideIcon } from 'lucide-react/dist/lucide-react';
|
|
|
|
import type { ExtendedDocumentStatus } from '@hanzo/esign-prisma/types/extended-document-status';
|
|
import { SignatureIcon } from '@hanzo/esign-ui/icons/signature';
|
|
import { cn } from '@hanzo/esign-ui/lib/utils';
|
|
|
|
type FriendlyStatus = {
|
|
label: MessageDescriptor;
|
|
labelExtended: MessageDescriptor;
|
|
icon?: LucideIcon;
|
|
color: string;
|
|
};
|
|
|
|
export const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus> = {
|
|
PENDING: {
|
|
label: msg`Pending`,
|
|
labelExtended: msg`Document pending`,
|
|
icon: Clock,
|
|
color: 'text-muted-foreground',
|
|
},
|
|
COMPLETED: {
|
|
label: msg`Completed`,
|
|
labelExtended: msg`Document completed`,
|
|
icon: CheckCircle2,
|
|
color: 'text-foreground',
|
|
},
|
|
DRAFT: {
|
|
label: msg`Draft`,
|
|
labelExtended: msg`Document draft`,
|
|
icon: File,
|
|
color: 'text-muted-foreground',
|
|
},
|
|
REJECTED: {
|
|
label: msg`Rejected`,
|
|
labelExtended: msg`Document rejected`,
|
|
icon: XCircle,
|
|
color: 'text-destructive',
|
|
},
|
|
INBOX: {
|
|
label: msg`Inbox`,
|
|
labelExtended: msg`Document inbox`,
|
|
icon: SignatureIcon,
|
|
color: 'text-muted-foreground',
|
|
},
|
|
ALL: {
|
|
label: msg`All`,
|
|
labelExtended: msg`Document All`,
|
|
color: 'text-muted-foreground',
|
|
},
|
|
};
|
|
|
|
export type DocumentStatusProps = HTMLAttributes<HTMLSpanElement> & {
|
|
status: ExtendedDocumentStatus;
|
|
inheritColor?: boolean;
|
|
};
|
|
|
|
export const DocumentStatus = ({
|
|
className,
|
|
status,
|
|
inheritColor,
|
|
...props
|
|
}: DocumentStatusProps) => {
|
|
const { _ } = useLingui();
|
|
|
|
const { label, icon: Icon, color } = FRIENDLY_STATUS_MAP[status];
|
|
|
|
return (
|
|
<span className={cn('flex items-center', className)} {...props}>
|
|
{Icon && (
|
|
<Icon
|
|
className={cn('mr-2 inline-block h-4 w-4', {
|
|
[color]: !inheritColor,
|
|
})}
|
|
/>
|
|
)}
|
|
{_(label)}
|
|
</span>
|
|
);
|
|
};
|