49 lines
1 KiB
TypeScript
49 lines
1 KiB
TypeScript
|
// 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>
|
||
|
|
);
|
||
|
|
}
|