Agent Zero
6f1655785e
- mail.ts: add explicit types to decodeMimeHeader callback params - SessionList.tsx: use React.MouseEvent instead of nativeEvent - ComposeModal.tsx: construct name from first_name + last_name - MailDetail.tsx: destructure onReply/onForward from props - RichTextEditor.tsx: use SetContentOptions object instead of boolean - MailSearchBar.tsx: add optional value prop to interface - EmptyState.tsx: add optional children prop - Badge.tsx: add secondary variant to BadgeVariant, variantClasses, dotColors - ConfirmDialog.tsx: add optional children prop - hooks.ts: extend SearchResult type to include mail/file/event
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import clsx from 'clsx';
|
|
|
|
export type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'secondary';
|
|
|
|
export interface BadgeProps {
|
|
variant?: BadgeVariant;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
dot?: boolean;
|
|
}
|
|
|
|
const variantClasses: Record<BadgeVariant, string> = {
|
|
default: 'bg-secondary-100 text-secondary-700',
|
|
primary: 'bg-primary-100 text-primary-700',
|
|
success: 'bg-success-100 text-success-700',
|
|
warning: 'bg-warning-100 text-warning-700',
|
|
danger: 'bg-danger-100 text-danger-700',
|
|
info: 'bg-accent-100 text-accent-700',
|
|
secondary: 'bg-secondary-200 text-secondary-800',
|
|
};
|
|
|
|
const dotColors: Record<BadgeVariant, string> = {
|
|
default: 'bg-secondary-400',
|
|
primary: 'bg-primary-500',
|
|
success: 'bg-success-500',
|
|
warning: 'bg-warning-500',
|
|
danger: 'bg-danger-500',
|
|
info: 'bg-accent-500',
|
|
secondary: 'bg-secondary-500',
|
|
};
|
|
|
|
export function Badge({ variant = 'default', children, className, dot = false }: BadgeProps) {
|
|
return (
|
|
<span
|
|
className={clsx(
|
|
'inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium',
|
|
variantClasses[variant],
|
|
className
|
|
)}
|
|
>
|
|
{dot && <span className={clsx('w-1.5 h-1.5 rounded-full', dotColors[variant])} aria-hidden="true" />}
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|