Chat Body Components

This section is responsible of displaying and sending messages in group and DMs. This section is made up of 5 Components:-

• GroupTab: The Section Header of chat body section is created via this component.

Section2.jsx

import { GroupTab } from "@Chattgator/components"

const SampleApp = () => {
    return (
        <>
            <GroupTab />
        </>
    );
};

export default SampleApp;

• SingleChatContainer: This component is the what displays a single block of chat. Changes color absed on whether sent by user or not.

Section2.jsx

import { SingleChatContainer } from "@Chattgator/components"

const SampleApp = () => {
    return (
        <>
            <SingleChatContainer />
        </>
    );
};

export default SampleApp;

• ChatSendDate: This component is the what displays the date in SingleChatContainer.

Section2.jsx

import { ChatSendDate } from "@Chattgator/components"

const SampleApp = () => {
    return (
        <>
            <ChatSendDate />
        </>
    );
};

export default SampleApp;

• ProfileCard: This component is where user info is displayed in form of a small card.

Section2.jsx

import { ProfileCard } from "@Chattgator/components"

const SampleApp = () => {
    return (
        <>
            <ProfileCard />
        </>
    );
};

export default SampleApp;

• ChatWindow: This component is where all the chats in SingleChatContainer is displayed, basically this is the main attraction of this section.

Section2.jsx

import { ChatWindow } from "@Chattgator/components"

const SampleApp = () => {
    return (
        <>
            <ChatWindow />
        </>
    );
};

export default SampleApp;