Blame · Banner.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import type {ReactNode} from 'react';
b69ab31	9
b69ab31	10	import * as stylex from '@stylexjs/stylex';
b69ab31	11	import {Tooltip} from './Tooltip';
b69ab31	12
b69ab31	13	import './Banner.css';
b69ab31	14
b69ab31	15	export enum BannerKind {
b69ab31	16	default = 'default',
b69ab31	17	warning = 'warning',
b69ab31	18	error = 'error',
b69ab31	19	green = 'green',
b69ab31	20	}
b69ab31	21
b69ab31	22	export function Banner({
b69ab31	23	kind,
b69ab31	24	children,
b69ab31	25	icon,
b69ab31	26	buttons,
b69ab31	27	alwaysShowButtons,
b69ab31	28	xstyle,
b69ab31	29	}: {
b69ab31	30	kind?: BannerKind;
b69ab31	31	children: ReactNode;
b69ab31	32	icon?: ReactNode;
b69ab31	33	buttons?: ReactNode;
b69ab31	34	alwaysShowButtons?: boolean;
b69ab31	35	xstyle?: stylex.StyleXStyles;
b69ab31	36	}) {
b69ab31	37	const {className: stylexClassName, ...otherStylex} = stylex.props(xstyle);
b69ab31	38	return (
b69ab31	39	<div className={`${stylexClassName} banner banner-${kind ?? 'default'}`} {...otherStylex}>
b69ab31	40	<div className="banner-content">
b69ab31	41	{icon ?? null} {children}
b69ab31	42	</div>
b69ab31	43	{buttons && (
b69ab31	44	<div className={'banner-buttons' + (alwaysShowButtons ? ' banner-buttons-visible' : '')}>
b69ab31	45	{buttons}
b69ab31	46	</div>
b69ab31	47	)}
b69ab31	48	</div>
b69ab31	49	);
b69ab31	50	}
b69ab31	51
b69ab31	52	export function BannerTooltip({tooltip, children}: {tooltip: string; children: ReactNode}) {
b69ab31	53	return (
b69ab31	54	<Tooltip trigger="hover" placement="bottom" title={tooltip}>
b69ab31	55	{children}
b69ab31	56	</Tooltip>
b69ab31	57	);
b69ab31	58	}