Promotional banners

client/modules/IDE/pages/IDEView.jsx

@@ -87,6 +87,37 @@ function WarnIfUnsavedChanges() {
   );
 }
 
+function Banner() {
+  // temporary banner to display funding opportunities
+  const [textObj, setTextObj] = useState({});
+
+  useEffect(() => {
+    const grant1 = {
+      copy:
+        'Learn to make art with AI with the Social Software High School Summer Institute. Apply by June 1!',
+      url: 'https://summer.ucla.edu/program/social-software-summer-institute/'
+    };
+
+    const grant2 = {
+      copy:
+        'Join us in contributing to p5.js——receive a $10,000 opportunity to grow within the contributor community!',
+      url: 'https://processingfoundation.org/grants'
+    };
+
+    const allMessages = [grant1, grant2];
+    const randomIndex = Math.floor(Math.random() * allMessages.length);
+    const randomMessage = allMessages[randomIndex];
+
+    setTextObj(randomMessage);
+  }, []);
+
+  return (
+    <div className="banner">
+      <a href={textObj.url}>{textObj.copy}</a>
+    </div>
+  );
+}
+
 export const CmControllerContext = React.createContext({});
 
 const IDEView = () => {
@@ -170,6 +201,7 @@ const IDEView = () => {
       <Helmet>
         <title>{getTitle(project)}</title>
       </Helmet>
+      <Banner />
       <IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
       <WarnIfUnsavedChanges />
       <Toast />

client/styles/layout/_ide.scss

@@ -16,6 +16,19 @@
 	width: 100%;
 }
 
+.banner {
+  width: 100%;
+  min-height: 2.2rem;
+  text-align: center;
+  padding: 0.5rem;
+  font-weight: bold;
+  border-bottom: 1px dashed #A6A6A6;
+
+  @media (max-width: 770px) {
+    min-height: 3.3rem;
+  }
+}
+
 .sidebar {
   width: 100%;
   height: 100%;