Add Banner for Messaging + Announcements #3531

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,49 @@
	import React from 'react';
	import PropTypes from 'prop-types';
	import { CrossIcon } from '../../../common/icons';

	/**
	* Banner displays a dismissible announcement bar with a link and a close icon.
	* It's typically used to highlight opportunities, but use and design can be flexible.
	*
	* This component is presentational only — visibility logic (open/close state) should be
	* controlled by the parent via the `onClose` handler.
	*
	* @param {Object} props
	* @param {function} props.onClose - Function called when the user clicks the close (✕) button
	* @returns {JSX.Element} The banner component with a call-to-action link and a close button
	*
	* @example
	* const [showBanner, setShowBanner] = useState(true);
	*
	* {showBanner && (
	* <Banner onClose={() => setShowBanner(false)} />
	* )}
	*/

	const Banner = ({ onClose }) => {
	// URL can be updated depending on the opportunity or announcement.
	const bannerURL = 'https://openprocessing.org/curation/89576';
	const bannerCopy = (
	<>
	We’re accepting p5.js sketches for a special curation exploring the new
	features in p5.js 2.0!{' '}
	<span style={{ fontWeight: 600 }}>Submit by July 13!</span>
	</>
	);

	return (
	<div className="banner">
	<a href={bannerURL}>{bannerCopy}</a>
	<button className="banner-close-button" onClick={onClose}>
	<CrossIcon />
	</button>
	</div>
	);
	};

	Banner.propTypes = {
	onClose: PropTypes.func.isRequired
	};

	export default Banner;

3 changes: 3 additions & 0 deletions client/modules/IDE/pages/IDEView.jsx

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -27,6 +27,7 @@ import {
		} from '../components/Editor/MobileEditor';
		import IDEOverlays from '../components/IDEOverlays';
		import useIsMobile from '../hooks/useIsMobile';
	import Banner from '../components/Banner';
		import { P5VersionProvider } from '../hooks/useP5Version';

		function getTitle(project) {
Expand Down Expand Up		@@ -105,6 +106,7 @@ const IDEView = () => {
		const [sidebarSize, setSidebarSize] = useState(160);
		const [isOverlayVisible, setIsOverlayVisible] = useState(false);
		const [MaxSize, setMaxSize] = useState(window.innerWidth);
	const [displayBanner, setDisplayBanner] = useState(true);

		const cmRef = useRef({});

Expand Down Expand Up		@@ -171,6 +173,7 @@ const IDEView = () => {
		<Helmet>
		<title>{getTitle(project)}</title>
		</Helmet>
	{displayBanner && <Banner onClose={() => setDisplayBanner(false)} />}
		<IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
		<WarnIfUnsavedChanges />
		<Toast />
Expand Down

30 changes: 30 additions & 0 deletions client/styles/components/_banner.scss

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,30 @@
	.banner {
	width: 100%;
	min-height: 2.2rem;
	text-align: center;
	padding: 1rem;
	background-color: #DFED33; // yellow from p5.js website
	border-bottom: 1px solid #000;

	a {
	color: #000;
	}

	a:hover {
	text-decoration: underline;
	}

	@media (max-width: 770px) {
	min-height: 3.3rem;
	}
	}

	.banner-close-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 20px;
	width:20px;
	float: right;
	}

1 change: 1 addition & 0 deletions client/styles/main.scss

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -55,6 +55,7 @@
		@import 'components/skip-link';
		@import 'components/stars';
		@import 'components/admonition';
	@import 'components/banner';

		@import 'layout/dashboard';
		@import 'layout/ide';

Navigation Menu