35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import { Handle, Position } from 'reactflow';
|
|
|
|
import { UserWithDrawer } from '@app/browse/components/userWithDrawer';
|
|
|
|
import { GroupTitle } from './groupTitle';
|
|
|
|
export function UserGroupNode({ data }) {
|
|
return (
|
|
<>
|
|
<Handle
|
|
type="target"
|
|
position={Position.Top}
|
|
className="h-2 w-5 rounded-full border-none !bg-fuchsia-400"
|
|
/>
|
|
<div className="relative mx-3 my-3 flex flex-col gap-1">
|
|
{data.title ? (
|
|
<h3 className="text-sm font-semibold text-fuchsia-500">{data.title}</h3>
|
|
) : (
|
|
<GroupTitle pubkey={data.pubkey} />
|
|
)}
|
|
<div className="grid grid-cols-5 gap-6 rounded-lg border border-fuchsia-500/50 bg-fuchsia-500/10 p-4">
|
|
{data.list.map((user: string) => (
|
|
<UserWithDrawer key={user} pubkey={user} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
<Handle
|
|
type="source"
|
|
position={Position.Bottom}
|
|
className="h-2 w-5 rounded-full border-none !bg-fuchsia-400"
|
|
/>
|
|
</>
|
|
);
|
|
}
|