All files / libs/lti/components/src/lib/enrollment/kpi-structure-widget KpisStructureWidgetPresentation.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
43
44
45
46
47
48
49
50
51
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { css } from '@emotion/react';
import { memo } from 'react';

import { Divider, Group, Paper } from '@allshares/studio-design-system';
import { type CompanyShareWithPrice, type EnrollmentKpisStructureWidget, type LtiPlan } from '@amalia/lti/types';

import { KpiProportionsProgressBar } from './KpiProportionsProgressBar';
import { KpiStructureWidgetGrantedSharesForKpi } from './KpiStructureWidgetGrantedSharesForKpi';

export type KpisStructureWidgetPresentationProps = {
  readonly kpis: LtiPlan['kpis'];
  readonly sharePrice?: CompanyShareWithPrice;
  readonly sharesCount: number;
  readonly widgetConfiguration: Omit<EnrollmentKpisStructureWidget, 'id' | 'isDraft' | 'type'>;
};

export const KpisStructureWidgetPresentation = memo(function KpisStructureWidgetPresentation({
  kpis,
  widgetConfiguration,
  sharePrice,
  sharesCount,
}: KpisStructureWidgetPresentationProps) {
  return (
    <Paper>
      <div
        css={css`
          padding: 24px 20px;
        `}
      >
        <KpiProportionsProgressBar kpis={kpis} />
      </div>
      <Divider.Horizontal
        darkGrayShade={600}
        grayShade={50}
      />
      <Group>
        {kpis.map((kpi) => (
          <KpiStructureWidgetGrantedSharesForKpi
            key={kpi.id}
            kpi={kpi}
            sharePrice={sharePrice}
            sharesCount={sharesCount}
            showGrantedSharesBreakdown={widgetConfiguration.showGrantedSharesBreakdown}
            showMonetaryValue={widgetConfiguration.showMonetaryValues}
          />
        ))}
      </Group>
    </Paper>
  );
});