import {
Component,
HostListener,
OnInit,
TemplateRef,
ViewChild,
} from "@angular/core";
import { BaseStyle } from "@cometchat/uikit-elements";
import { TabItemStyle } from "@cometchat/uikit-shared";
import { CometChatTabItem } from "@cometchat/chat-uikit-angular";
export class CometchatUiComponent implements OnInit {
//access the refs using view child
@ViewChild("chatsRef", { static: false }) chatsRef!: TemplateRef<any>;
@ViewChild("usersRef", { static: false }) usersRef!: TemplateRef<any>;
@ViewChild("groupsRef", { static: false }) groupsRef!: TemplateRef<any>;
public tabsStyle: BaseStyle = {
border: "1px solid grey",
};
public tabs!: CometChatTabItem[]; //array of tabs item
//Styling tab items
public tabItemStyle: TabItemStyle = new TabItemStyle({
height: "fit-content",
width: "67px",
background: "white",
activeBackground: "white",
titleTextColor: "RGBA(20, 20, 20, 0.46)",
titleTextFont: "400 13px Inter",
iconTint: "RGBA(20, 20, 20, 0.46)",
activeIconTint: "RGB(51, 153, 255)",
activeTitleTextColor: "RGB(51, 153, 255)",
activeTitleTextFont: "RGB(51, 153, 255)",
});
//create an array of tabs item
ngAfterViewInit() {
setTimeout(() => {
this.tabs = [
{
childView: this.chatsRef,
title: "chats",
id: "chats",
iconURL: "assets/chats.svg",
style: this.tabItemStyle,
},
{
childView: this.usersRef,
title: "users",
id: "users",
iconURL: "assets/user.svg",
style: this.tabItemStyle,
},
{
childView: this.groupsRef,
title: "groups",
iconURL: "assets/group.svg",
id: "groups",
style: this.tabItemStyle,
},
];
}, 0);
}
}