42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import type { LucideIcon } from 'lucide-react';
|
|
import { Building2, CalendarDays, Globe, Landmark, MessageCircle, Phone, Share2 } from 'lucide-react';
|
|
import { cn } from '../../lib/cn';
|
|
import type { Channel } from '../../types';
|
|
|
|
export interface ChannelBadgeProps {
|
|
/** @default "Web" */
|
|
channel?: Channel;
|
|
/** @default "md" */
|
|
size?: 'sm' | 'md';
|
|
className?: string;
|
|
}
|
|
|
|
const CH: Record<Channel, { wrap: string; Icon: LucideIcon }> = {
|
|
WhatsApp: { wrap: 'bg-emerald-100 text-emerald-700', Icon: MessageCircle },
|
|
Web: { wrap: 'bg-sky-100 text-sky-700', Icon: Globe },
|
|
Referral: { wrap: 'bg-sunrise-100 text-sunrise-600', Icon: Share2 },
|
|
Agency: { wrap: 'bg-slate-100 text-navy-700', Icon: Building2 },
|
|
Bancassurance: { wrap: 'bg-slate-100 text-slate-700', Icon: Landmark },
|
|
Direct: { wrap: 'bg-slate-100 text-slate-600', Icon: Phone },
|
|
Event: { wrap: 'bg-amber-100 text-amber-700', Icon: CalendarDays },
|
|
};
|
|
|
|
/** Acquisition channel badge with glyph + color. */
|
|
export function ChannelBadge({ channel = 'Web', size = 'md', className }: ChannelBadgeProps) {
|
|
const c = CH[channel];
|
|
const sm = size === 'sm';
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'inline-flex items-center gap-1.5 rounded-pill font-sans font-semibold leading-none whitespace-nowrap',
|
|
sm ? 'text-2xs px-[9px] py-1' : 'text-xs px-[11px] py-[5px]',
|
|
c.wrap,
|
|
className,
|
|
)}
|
|
>
|
|
<c.Icon size={sm ? 11 : 13} />
|
|
{channel}
|
|
</span>
|
|
);
|
|
}
|