feat: create banner (#1070)

* feat: create banner

* patch: place banner around slideshow area

* patch: improve banner styling

* patch: adjust import path

django_project/minisass_frontend/src/components/Banner/index.tsx

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import { AiOutlineClose } from 'react-icons/ai';
+
+const Banner: React.FC = () => {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setVisible(false);
+    }, 15000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const bannerStyle: React.CSSProperties = {
+    backgroundColor: '#003f81',
+    color: 'white',
+    borderRadius: '8px',
+    padding: '16px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    position: 'fixed',
+    top: '0',
+    left: '0',
+    width: '100%',
+    zIndex: 50,
+    height: '10%',
+    boxSizing: 'border-box'
+  };
+
+  const textStyle: React.CSSProperties = {
+    flex: 1,
+    textAlign: 'center',
+    marginTop: '2%'
+  };
+
+  const buttonStyle: React.CSSProperties = {
+    color: 'white',
+    background: 'transparent',
+    border: 'none',
+    marginTop: '2%',
+    display: 'flex',
+    alignItems: 'center'
+  };
+
+  return (
+    <>
+      {visible && (
+        <div style={bannerStyle}>
+          <span style={textStyle}>
+            The miniSASS site will undergo routine maintenance on Friday, 30th August 2024. We apologize for any inconvenience caused by the brief downtime.
+          </span>
+          <button
+            onClick={() => setVisible(false)}
+            style={buttonStyle}
+          >
+            <AiOutlineClose size={24} />
+          </button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Banner;

django_project/minisass_frontend/src/components/SlideShow/index.tsx

@@ -3,6 +3,7 @@ import { Img } from "../../components/Img";
 import { Fade } from 'react-slideshow-image';
 import 'react-slideshow-image/dist/styles.css'
 import { globalVariables } from "../../utils";
+import Banner from "../Banner";
 
 // Define an array of images for the slideshow TODO get the images list from the api
 const slideshowImages = [
@@ -13,23 +14,25 @@ const slideshowImages = [
   `${globalVariables.staticPath}img_intrestedcitizensfromduct.png`,
 ];
 
-const Slideshow = () => {
+const Slideshow: React.FC = () => {
   return (
-    <div className="slide-container">
-      <Fade>
-        {slideshowImages.map((fadeImage, index) => (
-          <div key={index}>
-            <Img
-              className="h-[464px] sm:left-[] mt-auto mx-auto object-cover relative rounded-br-[65px] top-10 sm:top-[-80px] md:top-[-85px] w-full mt-[-25px]"
-              src={fadeImage}
-              alt="intrestedcitize"
-            />
-            {/* <h2>{fadeImage.caption}</h2> */}
-          </div>
-        ))}
-      </Fade>
+    <div className="relative">
+      <Banner />
+      <div className="slide-container">
+        <Fade>
+          {slideshowImages.map((fadeImage, index) => (
+            <div key={index}>
+              <Img
+                className="h-[464px] sm:left-[] mt-auto mx-auto object-cover relative rounded-br-[65px] top-10 sm:top-[-80px] md:top-[-85px] w-full mt-[-25px]"
+                src={fadeImage}
+                alt="intrestedcitize"
+              />
+            </div>
+          ))}
+        </Fade>
+      </div>
     </div>
-  )
+  );
 }