ChannelIcon.tsx1.7 KBView on GitHub /**
* A task's output kind → its icon.
*
* The channels with a recognisable mark keep it — Gmail, Slack, LinkedIn, WhatsApp — because
* that mark is how the channel is identified everywhere else in the product. Only the kinds with
* no brand of their own (calendar, CRM, file, reminder) fall back to a neutral lucide glyph.
*
* Extracted from TaskGroupDetailSidebar so the sidebar, the kanban card, and the board header can
* all render a task's output identically.
*/
import { CalendarDays, CircleDot, FileText, ListChecks } from 'lucide-react';
import { GmailColor } from '@/components/icons/icons';
import { LinkedInLogo, SlackLogo, WhatsAppLogo } from '@/modules/inbox/components/channel-icons';
import { cn } from '@/lib/utils';
export function ChannelIcon({ channel, className }: { channel: string | null; className?: string }) {
if (channel === 'slack') {
return <SlackLogo className={className} />;
}
if (channel === 'linkedin') {
return <LinkedInLogo className={className} />;
}
if (channel === 'whatsapp') {
return <WhatsAppLogo className={className} />;
}
if (channel === 'calendar') {
return <CalendarDays className={cn('text-muted-foreground/60', className)} />;
}
if (channel === 'crm-field' || channel === 'crm-opportunity') {
return <ListChecks className={cn('text-muted-foreground/60', className)} />;
}
if (channel === 'file') {
return <FileText className={cn('text-muted-foreground/60', className)} />;
}
if (channel === 'recommendation' || channel === 'none') {
return <CircleDot className={cn('text-muted-foreground/60', className)} />;
}
return <GmailColor className={className} />; // email + default
}