From 814ef4dd6a7a9ffb142a193dd95591d084b5351f Mon Sep 17 00:00:00 2001
From: Thomas Hammon <105238309+Motter360@users.noreply.github.com>
Date: Tue, 1 Oct 2024 20:24:59 -0500
Subject: [PATCH] Method banner (#157)

* added method conferance banner

* method conference banner, now linted

* Banner for the method conf. Ran lint, used --fix, and then solved remaining erros

* fixed various small bugs

* ran linting

* added variable to local storage to prevent rerenders upon browser refresh
---
 public/images/icons/exit-cross.png       | Bin 0 -> 278 bytes
 src/components/Banner/banner.jsx         |  49 +++++++++++++
 src/components/Banner/banner.module.scss |  84 +++++++++++++++++++++++
 src/components/Layout.tsx                |   2 +
 4 files changed, 135 insertions(+)
 create mode 100644 public/images/icons/exit-cross.png
 create mode 100644 src/components/Banner/banner.jsx
 create mode 100644 src/components/Banner/banner.module.scss

diff --git a/public/images/icons/exit-cross.png b/public/images/icons/exit-cross.png
new file mode 100644
index 0000000000000000000000000000000000000000..442f6a7dd93bf98ffd5318af39ed160c0859e91f
GIT binary patch
literal 278
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{%TJb$B+ufy8#Dz4;k>-u(M^{*VPC*9dm$X
zgJ5K1pajE8p+~;f47_DaJ2)O~dw=irzRl;aF`jnHEMLBM?YCKaQHigM&&=HM@x^Yr
zCqZh5I@2CR_bl9Sb>Wt+{k}`Y@($m6Z<DFUvg^avL`Oa0KOZmNk$t9AvnZC&VAh67
z9{citP25@Ea^Oksy*-;+PjA}u^44|UU=P-5TxH)rO*v_mcW=QRjZFKQ$&(Y=P9I{o
Yn&%Yv^6#x3KxZ>}y85}Sb4q9e0Q@6x8UO$Q

literal 0
HcmV?d00001

diff --git a/src/components/Banner/banner.jsx b/src/components/Banner/banner.jsx
new file mode 100644
index 0000000..9dfebdf
--- /dev/null
+++ b/src/components/Banner/banner.jsx
@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import styles from './banner.module.scss';
+
+export function Banner() {
+    const [displayBanner, setDisplayBanner] = useState(null);
+
+    useEffect(() => {
+        const stateCondition = localStorage.getItem('displayBanner');
+        console.log('localStorage = ' + localStorage.getItem('displayBanner'));
+        if (stateCondition === 'false') {
+            setDisplayBanner(false);
+        } else {
+            setDisplayBanner(true);
+        }
+        console.log('stateCondition =' + stateCondition);
+    }, []);
+
+    const hideBanner = () => {
+        localStorage.setItem('displayBanner', 'false');
+        setDisplayBanner(false);
+    };
+
+    const display = displayBanner ? styles.banner : styles.hidden;
+
+    return (
+        <div className={display}>
+            <div>
+                <h3 className={styles.textBold}>Method Conference</h3>
+            </div>
+            <div className={styles.textArea}>
+                <p className={styles.textBold}>Join us for a full day of code & learning.</p>
+                <p className={styles.text}>Saturday, October 12, 2024, @ eFactory</p>
+            </div>
+            <div className={styles.container}>
+                <a href="https://www.methodconf.com/2024/" target="_blank" className={styles.anchor}>
+                    <button className={styles.button}>BUY TICKETS</button>
+                </a>
+                <button className={styles.exitButton} onClick={hideBanner}>
+                    {/* eslint-disable */}
+                        <img src="/images/icons/exit-cross.png" className={styles.exit} alt="close banner" />
+                        {/* eslint-enable */}
+                    {/* We disabled this for linting because we don't have an icon 
+                        system for this site yet, and this component is temporary. They can
+                        be removed when the icon systems are integrated.*/}
+                </button>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/Banner/banner.module.scss b/src/components/Banner/banner.module.scss
new file mode 100644
index 0000000..8f74a2a
--- /dev/null
+++ b/src/components/Banner/banner.module.scss
@@ -0,0 +1,84 @@
+@import '@/styles/utils/all';
+
+.container{
+    display: flex;
+    justify-content: space-between;
+
+    width: 12em;
+}
+
+.hidden {
+    display: none;
+}
+
+.banner {
+    display: flex;
+    
+    height: 120px;
+    width: 98%;
+
+    margin: .5em;
+    padding: 0em 2em;
+
+    border-radius: 1em;
+    background-color: #E9F5FF;
+    
+
+    justify-content: space-between;
+    align-items: center;
+
+    text-align: center;
+}
+
+.textArea{
+    margin: 0em 1em;
+}
+
+.textBold{
+    font-family: sans-serif;
+    font-size: 1.5em;
+    font-weight: bold;
+    color: #0094FF;
+}
+
+.text{
+    font-family: sans-serif;
+    font-size: 1.5em;
+    color: #0094FF;
+}
+
+.button{
+    border: none;
+
+    padding: 1rem 2rem;
+
+    background-color: #0094FF;
+    color: #FFFFFF;
+
+    min-width: 150px;
+}
+
+.anchor :hover{
+    cursor: pointer;
+}
+
+.exit{
+    height: 1em;
+}
+
+.exitButton{
+    border: none;
+    background-color: #E9F5FF;
+}
+
+.exitButton :hover{
+    cursor: pointer;
+}
+@media (max-width:600px) {
+    .banner{
+        flex-direction: column;
+        justify-content: space-around;
+        
+        height: 20vh;
+    }
+}
\ No newline at end of file
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index ea533ff..e33f2cb 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,3 +1,4 @@
+import { Banner } from '@/components/Banner/banner.jsx';
 import { Footer } from '@/components/Footer/Footer';
 import { Navbar } from '@/components/Navbar/Navbar';
 import styles from './layout.module.scss';
@@ -11,6 +12,7 @@ export function Layout({ children }: ILayout): JSX.Element {
         <div className={styles.pageContainer}>
             <div className={styles.contentWrapper}>
                 <Navbar />
+                <Banner />
                 {children}
             </div>
             <Footer />