From 648b3a2759cb22d875629190113a90ae3c574d15 Mon Sep 17 00:00:00 2001
From: raclim <43053081+raclim@users.noreply.github.com>
Date: Wed, 2 Jul 2025 14:37:41 -0400
Subject: [PATCH 1/2] add banner component to IDE View

---
 client/modules/IDE/components/Banner.jsx | 49 ++++++++++++++++++++++++
 client/modules/IDE/pages/IDEView.jsx     |  3 ++
 2 files changed, 52 insertions(+)
 create mode 100644 client/modules/IDE/components/Banner.jsx

diff --git a/client/modules/IDE/components/Banner.jsx b/client/modules/IDE/components/Banner.jsx
new file mode 100644
index 0000000000..69139f31f8
--- /dev/null
+++ b/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;
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index a9cc72f169..2544b21135 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/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 />

From 882888541fb9196b89121615dab587343815cd22 Mon Sep 17 00:00:00 2001
From: raclim <43053081+raclim@users.noreply.github.com>
Date: Wed, 2 Jul 2025 14:38:06 -0400
Subject: [PATCH 2/2] add styling for banner

---
 client/styles/components/_banner.scss | 30 +++++++++++++++++++++++++++
 client/styles/main.scss               |  1 +
 2 files changed, 31 insertions(+)
 create mode 100644 client/styles/components/_banner.scss

diff --git a/client/styles/components/_banner.scss b/client/styles/components/_banner.scss
new file mode 100644
index 0000000000..6829f933bc
--- /dev/null
+++ b/client/styles/components/_banner.scss
@@ -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;
+}
\ No newline at end of file
diff --git a/client/styles/main.scss b/client/styles/main.scss
index 91e2d93483..8f97079bdd 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -55,6 +55,7 @@
 @import 'components/skip-link';
 @import 'components/stars';
 @import 'components/admonition';
+@import 'components/banner';
 
 @import 'layout/dashboard';
 @import 'layout/ide';