Profile name spoofing dialog

ts/components/conversation/TimelineWarning.tsx

@@ -0,0 +1,65 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { ReactNode } from 'react';
+
+import { LocalizerType } from '../../types/Util';
+
+const CLASS_NAME = 'module-TimelineWarning';
+const ICON_CONTAINER_CLASS_NAME = `${CLASS_NAME}__icon-container`;
+const GENERIC_ICON_CLASS_NAME = `${CLASS_NAME}__generic-icon`;
+const TEXT_CLASS_NAME = `${CLASS_NAME}__text`;
+const LINK_CLASS_NAME = `${TEXT_CLASS_NAME}__link`;
+const CLOSE_BUTTON_CLASS_NAME = `${CLASS_NAME}__close-button`;
+
+type PropsType = {
+  children: ReactNode;
+  i18n: LocalizerType;
+  onClose: () => void;
+};
+
+export function TimelineWarning({
+  children,
+  i18n,
+  onClose,
+}: Readonly<PropsType>): JSX.Element {
+  return (
+    <div className={CLASS_NAME}>
+      {children}
+      <button
+        aria-label={i18n('close')}
+        className={CLOSE_BUTTON_CLASS_NAME}
+        onClick={onClose}
+        type="button"
+      />
+    </div>
+  );
+}
+
+TimelineWarning.IconContainer = ({
+  children,
+}: Readonly<{ children: ReactNode }>): JSX.Element => (
+  <div className={ICON_CONTAINER_CLASS_NAME}>{children}</div>
+);
+
+TimelineWarning.GenericIcon = () => <div className={GENERIC_ICON_CLASS_NAME} />;
+
+TimelineWarning.Text = ({
+  children,
+}: Readonly<{ children: ReactNode }>): JSX.Element => (
+  <div className={TEXT_CLASS_NAME}>{children}</div>
+);
+
+type LinkProps = {
+  children: ReactNode;
+  onClick: () => void;
+};
+
+TimelineWarning.Link = ({
+  children,
+  onClick,
+}: Readonly<LinkProps>): JSX.Element => (
+  <button className={LINK_CLASS_NAME} onClick={onClick} type="button">
+    {children}
+  </button>
+);