Support for creating New Groups

ts/components/ContactPill.tsx

@@ -0,0 +1,74 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { FunctionComponent } from 'react';
+
+import { ColorType } from '../types/Colors';
+import { LocalizerType } from '../types/Util';
+import { ContactName } from './conversation/ContactName';
+import { Avatar, AvatarSize } from './Avatar';
+
+export type PropsType = {
+  avatarPath?: string;
+  color?: ColorType;
+  firstName?: string;
+  i18n: LocalizerType;
+  id: string;
+  isMe?: boolean;
+  name?: string;
+  onClickRemove: (id: string) => void;
+  phoneNumber?: string;
+  profileName?: string;
+  title: string;
+};
+
+export const ContactPill: FunctionComponent<PropsType> = ({
+  avatarPath,
+  color,
+  firstName,
+  i18n,
+  id,
+  name,
+  phoneNumber,
+  profileName,
+  title,
+  onClickRemove,
+}) => {
+  const removeLabel = i18n('ContactPill--remove');
+
+  return (
+    <div className="module-ContactPill">
+      <Avatar
+        avatarPath={avatarPath}
+        color={color}
+        noteToSelf={false}
+        conversationType="direct"
+        i18n={i18n}
+        name={name}
+        phoneNumber={phoneNumber}
+        profileName={profileName}
+        title={title}
+        size={AvatarSize.TWENTY_EIGHT}
+      />
+      <ContactName
+        firstName={firstName}
+        i18n={i18n}
+        module="module-ContactPill__contact-name"
+        name={name}
+        phoneNumber={phoneNumber}
+        preferFirstName
+        profileName={profileName}
+        title={title}
+      />
+      <button
+        aria-label={removeLabel}
+        className="module-ContactPill__remove"
+        onClick={() => {
+          onClickRemove(id);
+        }}
+        title={removeLabel}
+        type="button"
+      />
+    </div>
+  );
+};