packages/pass/components/Vault/VaultTag.tsx

   1 import type { FC } from 'react';
   2
   3 import type { IconName, IconSize } from '@proton/components';
   4 import { Icon } from '@proton/components';
   5 import { VaultColor } from '@proton/pass/types/protobuf/vault-v1';
   6 import clsx from '@proton/utils/clsx';
   7
   8 import { VAULT_COLOR_MAP } from './constants';
   9
  10 import './VaultTag.scss';
  11
  12 type Props = {
  13     title: string;
  14     shared?: boolean;
  15     icon: IconName;
  16     color?: VaultColor;
  17     count?: number;
  18     iconSize?: IconSize;
  19 };
  20
  21 export const VaultTag: FC<Props> = ({ title, shared = false, icon, color, count, iconSize = 3 }) => {
  22     return (
  23         <div
  24             className={clsx(
  25                 'pass-vault-tag flex items-center text-sm gap-x-1 flex-nowrap lh100',
  26                 shared && 'pass-vault-tag--shared'
  27             )}
  28             style={shared ? { '--vault-icon-color': `rgb(${VAULT_COLOR_MAP[color ?? VaultColor.COLOR1]})` } : undefined}
  29         >
  30             {<Icon className="shrink-0 mr-1" name={icon} size={iconSize} />}
  31             <span className="text-ellipsis">{title}</span>
  32             {shared && count && (
  33                 <>
  34                     <span className="shrink-0">• {count}</span>
  35                     <Icon className="shrink-0" name="users" size={iconSize} />
  36                 </>
  37             )}
  38         </div>
  39     );
  40 };