React components
Chat interface
A simulated dashboard interface showing Chat, Mail, and Notes tabs.
Overview
The ChatInterface component simulates a productivity dashboard found in SaaS applications. Default data shows three tabs: Chat, Mail, and Notes, demonstrating the interface's capabilities.
Usage
import ChatIcon from '@/assets/icons/chat-hg-icon.svg?react';
import MailIcon from '@/assets/icons/mail-hg-icon.svg?react';
import { ChatInterface } from '@/components/core/features/chat-interface';
import { ChatConversations } from '@/components/core/features/chat-conversations';
import { InboxMail } from '@/components/core/features/inbox-mail';
const chatData: ChatData[] = [
{
id: 'chat',
title: 'Chat',
icon: ChatIcon,
content: ChatConversations,
},
{
id: 'mail',
title: 'Mail',
icon: MailIcon,
content: InboxMail,
},
];
function ProductTour() {
return <ChatInterface data={chatData} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
data? | ChatData[] | defaultData | A data for tab interface contains text, icon, and content |
className? | string | - | Optional CSS class names. |
Data interface
interface ChatData {
id: string;
title: string;
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
content: React.ComponentType;
}