All files / libs/lti/components/src/lib/enrollment/plan-information-widgets/widgets PlanInformationWidgetBase.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
52
53
54
55
56
57
58
59
60
61
62
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { css } from '@emotion/react';
import { memo, type ReactNode } from 'react';
import { type SetNonNullable } from 'type-fest';

import { Group, Stack, Typography } from '@allshares/studio-design-system';
import { type TypographyVariant } from '@allshares/studio-design-system/meta';
import { type CurrencyValue } from '@amalia/kernel/monetary/types';

import { MonetaryValueForWidget } from '../../common/MonetaryValueForWidget';

export interface PlanInformationWidgetBaseProps {
  readonly title: ReactNode;
  readonly value: ReactNode;
  readonly monetaryValue?: SetNonNullable<CurrencyValue>;
  readonly valueTypographyVariant?: `${TypographyVariant}`;
}

export const PlanInformationWidgetBase = memo(function PlanInformationWidgetBase({
  title,
  value,
  monetaryValue,
  valueTypographyVariant = 'bodyLargeMedium',
}: PlanInformationWidgetBaseProps) {
  return (
    <Stack
      gap={6}
      css={css`
        padding: 12px 24px;
        flex: 1;

        & + & {
          border-left: 1px solid var(--ds-border-color-100);
        }
      `}
    >
      <Typography
        variant="bodyXsmallRegular"
        css={css`
          color: var(--ds-text-color-500);
        `}
      >
        {title}
      </Typography>
      <Group
        align="baseline"
        justify="space-between"
      >
        <Typography variant={valueTypographyVariant}>{value}</Typography>

        {!!monetaryValue && (
          <MonetaryValueForWidget
            symbol={monetaryValue.symbol}
            symbolTypographyVariant="bodyXsmallRegular"
            value={monetaryValue.value}
            valueTypographyVariant="heading4Regular"
          />
        )}
      </Group>
    </Stack>
  );
});