Username and username link integrity check

ts/components/LeftPaneBanner.tsx

@@ -0,0 +1,48 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { ReactNode } from 'react';
+import React, { useCallback } from 'react';
+
+const BASE_CLASS_NAME = 'LeftPaneBanner';
+
+export type PropsType = Readonly<{
+  children?: ReactNode;
+  actionText: string;
+  onClick: () => void;
+}>;
+
+export function LeftPaneBanner({
+  children,
+  actionText,
+  onClick,
+}: PropsType): JSX.Element {
+  const onClickWrap = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      onClick?.();
+    },
+    [onClick]
+  );
+
+  return (
+    <div className={BASE_CLASS_NAME}>
+      <div className={`${BASE_CLASS_NAME}__content`}>{children}</div>
+
+      <div className={`${BASE_CLASS_NAME}__footer`}>
+        <button
+          title={actionText}
+          aria-label={actionText}
+          className={`${BASE_CLASS_NAME}__footer__action-button`}
+          onClick={onClickWrap}
+          tabIndex={0}
+          type="button"
+        >
+          {actionText}
+        </button>
+      </div>
+    </div>
+  );
+}