packages/pass/components/Vault/VaultIcon.tsx

   1 import type { FC } from 'react';
   2
   3 import type { IconSize } from '@proton/components';
   4 import { Icon } from '@proton/components';
   5 import { getIconSizePx } from '@proton/pass/components/Layout/Icon/IconBox';
   6 import { VAULT_COLOR_MAP, VAULT_ICON_MAP } from '@proton/pass/components/Vault/constants';
   7 import type { VaultIcon as VaultIconEnum } from '@proton/pass/types/protobuf/vault-v1';
   8 import { VaultColor as VaultColorEnum } from '@proton/pass/types/protobuf/vault-v1';
   9 import { rootFontSize } from '@proton/shared/lib/helpers/dom';
  10 import clsx from '@proton/utils/clsx';
  11
  12 import './VaultIcon.scss';
  13
  14 export type VaultIconName = VaultIconEnum | 'pass-all-vaults' | 'pass-trash';
  15
  16 type Props = {
  17     background?: boolean;
  18     className?: string;
  19     color?: VaultColorEnum;
  20     highlighted?: boolean;
  21     icon?: VaultIconName;
  22     size?: IconSize;
  23 };
  24
  25 const rem = (px: number) => `${px / rootFontSize()}rem`;
  26
  27 export const VaultIcon: FC<Props> = ({
  28     className,
  29     background,
  30     highlighted,
  31     size = 5,
  32     color,
  33     icon = 'pass-all-vaults',
  34 }) => (
  35     <span
  36         className={clsx([
  37             `pass-vault-icon rounded-xl relative w-custom h-custom`,
  38             background && 'background',
  39             size >= 5 && 'rounded-full',
  40             className,
  41         ])}
  42         style={{
  43             '--vault-icon-color': highlighted
  44                 ? 'var(--interaction-norm-contrast)'
  45                 : `rgb(${VAULT_COLOR_MAP[color ?? VaultColorEnum.COLOR1]})`,
  46             '--w-custom': rem(getIconSizePx(background ? size * 2 : size)),
  47             '--h-custom': rem(getIconSizePx(background ? size * 2 : size)),
  48         }}
  49     >
  50         <Icon
  51             className="absolute inset-center"
  52             name={icon === 'pass-all-vaults' || icon === 'pass-trash' ? icon : VAULT_ICON_MAP[icon]}
  53             size={size}
  54         />
  55     </span>
  56 );