49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import Row from "@moduletrace/twui/layout/Row";
|
|
import Stack from "@moduletrace/twui/layout/Stack";
|
|
import type { ChatroomBot } from "@/src/types";
|
|
import ChatroomStone from "./chatroom-stone";
|
|
|
|
type Props = {
|
|
bots: ChatroomBot[];
|
|
};
|
|
|
|
/**
|
|
* The square the cluster fills (`w-7 h-7`), the size of a rail avatar.
|
|
*/
|
|
const ClusterSize = 28;
|
|
|
|
/**
|
|
* A chatroom's bots packed into one avatar-sized square: the asking bot
|
|
* on top, the two below it in a triangle (four make a square, the rest
|
|
* are left out). Stones stay small and apart: never overlapping, in a
|
|
* badge or outlined. One bot fills the square alone.
|
|
*/
|
|
export default function ChatroomStoneCluster({ bots }: Props) {
|
|
const shown = bots.slice(0, 4);
|
|
const stone = Math.floor((ClusterSize - 2) / 2);
|
|
|
|
if (shown.length <= 1) {
|
|
return shown[0] ? <ChatroomStone bot={shown[0]} size={ClusterSize} /> : null;
|
|
}
|
|
|
|
const top = shown.length == 3 ? shown.slice(0, 1) : shown.slice(0, 2);
|
|
const bottom = shown.length == 2 ? [] : shown.slice(top.length);
|
|
|
|
return (
|
|
<Stack className="shrink-0 gap-0.5! items-center justify-center w-7 h-7">
|
|
<Row className="gap-0.5! flex-nowrap justify-center">
|
|
{top.map((bot) => (
|
|
<ChatroomStone key={bot.id} bot={bot} size={stone} />
|
|
))}
|
|
</Row>
|
|
{bottom.length ? (
|
|
<Row className="gap-0.5! flex-nowrap justify-center">
|
|
{bottom.map((bot) => (
|
|
<ChatroomStone key={bot.id} bot={bot} size={stone} />
|
|
))}
|
|
</Row>
|
|
) : null}
|
|
</Stack>
|
|
);
|
|
}
|