| 1 |
/** |
| 2 |
* Dark-green AI banner: the shared shell behind the AI announcement banners |
| 3 |
* (AI Overview's assistant banner, Content Guidelines' empty-state banner). |
| 4 |
* Renders the rounded dark background, the two gradient orbs, and a close X, |
| 5 |
* with the caller's title/description/actions layered above. |
| 6 |
*/ |
| 7 |
|
| 8 |
import { Button } from '@wordpress/components'; |
| 9 |
import { __ } from '@wordpress/i18n'; |
| 10 |
import { closeSmall } from '@wordpress/icons'; |
| 11 |
import clsx from 'clsx'; |
| 12 |
|
| 13 |
import './style.scss'; |
| 14 |
|
| 15 |
/** |
| 16 |
* Dark AI banner shell. |
| 17 |
* |
| 18 |
* @param {object} props - Component props. |
| 19 |
* @param {string} props.className - Extra class for layout overrides (width, margins). |
| 20 |
* @param {string} props.title - Banner heading. |
| 21 |
* @param {string} props.description - Supporting copy under the heading. |
| 22 |
* @param {object} props.actions - Optional action buttons, rendered in a row under the copy. |
| 23 |
* @param {Function} props.onDismiss - Called when the close X is clicked. |
| 24 |
* @param {string} props.dismissLabel - Accessible label for the close X. |
| 25 |
* @return {object} Component markup. |
| 26 |
*/ |
| 27 |
export default function AiBanner( { |
| 28 |
className, |
| 29 |
title, |
| 30 |
description, |
| 31 |
actions, |
| 32 |
onDismiss, |
| 33 |
dismissLabel, |
| 34 |
} ) { |
| 35 |
return ( |
| 36 |
<div className={ clsx( 'jetpack-ai-banner', className ) }> |
| 37 |
<div className="jetpack-ai-banner__content"> |
| 38 |
<h2 className="jetpack-ai-banner__title">{ title }</h2> |
| 39 |
<p className="jetpack-ai-banner__description">{ description }</p> |
| 40 |
{ actions && <div className="jetpack-ai-banner__actions">{ actions }</div> } |
| 41 |
</div> |
| 42 |
<Button |
| 43 |
className="jetpack-ai-banner__close" |
| 44 |
icon={ closeSmall } |
| 45 |
label={ dismissLabel ?? __( 'Dismiss banner', 'jetpack' ) } |
| 46 |
size="small" |
| 47 |
onClick={ onDismiss } |
| 48 |
/> |
| 49 |
<div className="jetpack-ai-banner__orb jetpack-ai-banner__orb--top" /> |
| 50 |
<div className="jetpack-ai-banner__orb jetpack-ai-banner__orb--bottom" /> |
| 51 |
</div> |
| 52 |
); |
| 53 |
} |
| 54 |
|
