Tristan Yang
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import { FC } from "react";
|
|
import Avatar from "./Avatar";
|
|
import { useAppSelector } from "../../app/store";
|
|
import clsx from "clsx";
|
|
|
|
|
|
interface Props {
|
|
interactive?: boolean;
|
|
id: number;
|
|
compact?: boolean;
|
|
avatarSize?: number;
|
|
}
|
|
|
|
const Channel: FC<Props> = ({ interactive = true, id, compact = false, avatarSize = 32 }) => {
|
|
const { channel, totalMemberCount } = useAppSelector((store) => {
|
|
return {
|
|
channel: store.channels.byId[id],
|
|
totalMemberCount: store.users.ids.length
|
|
};
|
|
});
|
|
|
|
if (!channel) return null;
|
|
const { name, members = [], is_public, icon } = channel;
|
|
|
|
return (
|
|
<div
|
|
className={clsx(`flex items-center justify-start gap-2 p-2 rounded-lg select-none`, compact && "p-0", interactive && "md:hover:bg-gray-500/10")}
|
|
>
|
|
<div className={`cursor-pointer relative`} style={{ width: `${avatarSize}px`, height: `${avatarSize}px` }}>
|
|
<Avatar
|
|
width={avatarSize}
|
|
height={avatarSize}
|
|
type="channel"
|
|
src={icon}
|
|
name={"#"}
|
|
alt="avatar"
|
|
className="!w-full !h-full rounded-full"
|
|
/>
|
|
</div>
|
|
{!compact && (
|
|
<div className="flex text-sm text-gray-500 font-semibold">
|
|
<span className="max-w-[140px] truncate">{name}</span> ({is_public ? totalMemberCount : members.length})
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Channel;
|