diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index 2bd2649770..9fa5817d62 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/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 ( +
+ {textObj.copy} +
+ ); +} + export const CmControllerContext = React.createContext({}); const IDEView = () => { @@ -170,6 +201,7 @@ const IDEView = () => { {getTitle(project)} + cmRef.current?.getContent()} /> diff --git a/client/styles/layout/_ide.scss b/client/styles/layout/_ide.scss index bf7c5ae903..b801ece6eb 100644 --- a/client/styles/layout/_ide.scss +++ b/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%;