All files / libs/payout-definition/plans/components/src/lib/plan-awards/award-card PlanAwardCard.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { css } from '@emotion/react';
import { memo, useMemo } from 'react';

import { Divider, Group, Paper } from '@allshares/studio-design-system';
import { type BadgeAward, type BadgeConfiguration } from '@amalia/payout-definition/plans/types';
import { UsersAvatarStack } from '@amalia/tenants/users/components';
import { useUsersMap } from '@amalia/tenants/users/state';

import { PlanAwardDetails } from '../award-details/PlanAwardDetails';

export type PlanAwardCardProps = {
  readonly configuration: BadgeConfiguration;
  readonly awards: BadgeAward[];
};

export const PlanAwardCard = memo(function PlanAwardCard({ configuration, awards }: PlanAwardCardProps) {
  const usersMap = useUsersMap(awards.map((a) => a.userId));
  const users = useMemo(() => Object.values(usersMap).map((user) => ({ user })), [usersMap]);

  return (
    <Paper>
      <Group
        align="center"
        gap={24}
        css={css`
          padding: 24px 32px;
        `}
      >
        <PlanAwardDetails configuration={configuration} />

        <Divider.Vertical />

        <UsersAvatarStack
          maxUsers={4}
          size={UsersAvatarStack.Size.LARGE}
          users={users}
        />
      </Group>
    </Paper>
  );
});