51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { UserTablo } from "@xtablo/shared/types/tablos.types";
|
|
import { ChannelHeader, useChannelStateContext } from "stream-chat-react";
|
|
import { ChannelBadge } from "./ChannelBadge";
|
|
|
|
interface CustomChannelHeaderProps {
|
|
tablos: UserTablo[];
|
|
onToggleChannelList?: () => void;
|
|
isChannelListExpanded?: boolean;
|
|
}
|
|
|
|
export const CustomChannelHeader = ({
|
|
tablos,
|
|
onToggleChannelList,
|
|
isChannelListExpanded = false,
|
|
}: CustomChannelHeaderProps) => {
|
|
const { channel } = useChannelStateContext();
|
|
|
|
return (
|
|
<div className="flex items-center">
|
|
{onToggleChannelList && (
|
|
<button
|
|
onClick={onToggleChannelList}
|
|
className="mr-2 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
|
aria-label="Toggle channel list"
|
|
>
|
|
<svg
|
|
className={`w-5 h-5 transition-transform duration-200 ${
|
|
isChannelListExpanded ? "rotate-180" : ""
|
|
}`}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
)}
|
|
<ChannelHeader
|
|
Avatar={() => {
|
|
return (
|
|
<ChannelBadge
|
|
tablo={tablos?.find((t) => t.id === channel?.id) ?? null}
|
|
displayTitle={channel?.data?.config?.name}
|
|
isOnline={false}
|
|
/>
|
|
);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|