import clsx from 'clsx'; import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable'; import React from 'react'; import { Avatar, HStack } from 'soapbox/components/ui'; import { useAppSelector } from 'soapbox/hooks'; import { makeGetAccount } from 'soapbox/selectors'; import type { Account } from 'soapbox/types/entities'; const getAccount = makeGetAccount(); interface IAvatarStack { accountIds: ImmutableOrderedSet limit?: number } const AvatarStack: React.FC = ({ accountIds, limit = 3 }) => { const accounts = useAppSelector(state => ImmutableList(accountIds.slice(0, limit).map(accountId => getAccount(state, accountId)).filter(account => account))) as ImmutableList; return ( {accounts.map((account, i) => (
))}
); }; export default AvatarStack;