add banner component to IDE View

Author: raclim

client/modules/IDE/components/Banner.jsx

@@ -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;

client/modules/IDE/pages/IDEView.jsx

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