part 14 banner

Author: mluukkai

src/components/InfoBannerNextJs.js

@@ -0,0 +1,74 @@
+import React from 'react';
+
+const NEXT_JS_COURSE_URL =
+  'https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-nextjs';
+
+const InfoBannerNextJs = ({ visible, onHide, language }) => {
+  if (!visible) return null;
+
+  const text =
+    language === 'fi'
+      ? 'Uusi osa ilmestynyt:'
+      : 'A new course part has been released:';
+
+  const style = {
+    position: 'fixed',
+    left: 24,
+    right: 24,
+    bottom: 20,
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: 16,
+    padding: 14,
+    borderStyle: 'solid',
+    borderWidth: 2,
+    borderColor: '#ffc107',
+    backgroundColor: '#fff3cd',
+    color: '#5a4000',
+    zIndex: 2147483647,
+    boxShadow: '0 8px 30px rgba(0, 0, 0, 0.2)',
+  };
+
+  const textStyle = {
+    flex: 1,
+    minWidth: 0,
+    lineHeight: '1.4em',
+  };
+
+  const linkStyle = {
+    color: '#5a4000',
+    fontWeight: 600,
+    textDecoration: 'underline',
+    wordBreak: 'break-all',
+  };
+
+  const buttonStyle = {
+    outline: 'none',
+    backgroundColor: 'transparent',
+    border: 'none',
+    color: 'var(--color-text)',
+    cursor: 'pointer',
+    fontSize: 18,
+    lineHeight: 1,
+  };
+
+  return (
+    <div style={style} role="region" aria-label="Next.js course notice">
+      <div style={textStyle}>
+        {text}{' '}
+        <a href={NEXT_JS_COURSE_URL} style={linkStyle}>
+          {NEXT_JS_COURSE_URL}
+        </a>
+      </div>
+      <button
+        style={buttonStyle}
+        onClick={onHide}
+        aria-label={language === 'fi' ? 'Sulje ilmoitus' : 'Close notice'}
+      >
+        x
+      </button>
+    </div>
+  );
+};
+
+export default InfoBannerNextJs;

src/components/layout.js

@@ -9,6 +9,7 @@ import InfoBanner from './InfoBanner';
 import InfoBanner2 from './InfoBanner2';
 import InfoBanner3 from './InfoBanner3';
 import InfoBanner4 from './InfoBanner4';
+import InfoBannerNextJs from './InfoBannerNextJs';
 import Footer from './Footer/Footer';
 import PropTypes from 'prop-types';
 import SkipToContent from './SkipToContent/SkipToContent';
@@ -17,6 +18,7 @@ const BANNER_TO_KEY = 'part_10_changes';
 const BANNER3_TO_KEY = 'part_7_changes';
 const BANNER2_TO_KEY = 'part_6_changes';
 const BANNER4_TO_KEY = 'part_8_changes';
+const BANNER_NEXT_JS_KEY = 'part_14_changes';
 
 const Layout = (props) => {
   const { i18n } = useTranslation();
@@ -28,6 +30,7 @@ const Layout = (props) => {
   const [visible2, setVisible2] = useState(false);
   const [visible3, setVisible3] = useState(false);
   const [visible4, setVisible4] = useState(false);
+  const [nextJsVisible, setNextJsVisible] = useState(false);
 
   useEffect(() => {
     const key = localStorage.getItem(BANNER_TO_KEY);
@@ -61,6 +64,13 @@ const Layout = (props) => {
     }
   }, []);
 
+  useEffect(() => {
+    const key = localStorage.getItem(BANNER_NEXT_JS_KEY);
+    if (!key) {
+      setNextJsVisible(true);
+    }
+  }, []);
+
   const hideNote = () => {
     console.log('hideNote');
     localStorage.setItem(BANNER_TO_KEY, 'yes');
@@ -85,6 +95,12 @@ const Layout = (props) => {
     setVisible4(false);
   };
 
+  const hideNextJsNote = () => {
+    console.log('hideNote');
+    localStorage.setItem(BANNER_NEXT_JS_KEY, 'yes');
+    setNextJsVisible(false);
+  };
+
   return (
     <div className="main-wrapper">
       <SkipToContent isCoursePage={isCoursePage} />
@@ -99,6 +115,12 @@ const Layout = (props) => {
 
       <InfoBanner4 onHide={() => hideNote4()} visible={visible4} />
 
+      <InfoBannerNextJs
+        language={siteLanguage}
+        onHide={() => hideNextJsNote()}
+        visible={nextJsVisible}
+      />
+
       <main id="main-content">{children}</main>
 
       {!hideFooter && <Footer lang={siteLanguage} />}