Add alert regarding esports center

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.18",
     "@next/font": "13.1.6",
     "@types/node": "18.13.0",
     "@types/react": "18.0.28",

src/components/banner-alert.tsx

@@ -0,0 +1,42 @@
+import { XMarkIcon } from '@heroicons/react/24/solid'
+import React, { useState } from 'react'
+
+interface IAlertBanner {
+  msg: string
+}
+
+export default function AlertBanner(props: IAlertBanner) {
+  const [isHidden, setHidden] = useState<boolean>(false)
+
+  function changeVisibility() {
+    setHidden(!isHidden)
+  }
+
+  return (
+    <div
+      style={{
+        backgroundColor: '#d62929',
+        paddingLeft: '20px',
+        paddingRight: '20px',
+        paddingBottom: '25px',
+        paddingTop: '25px',
+        color: 'white',
+        borderColor: 'white',
+        borderStyle: 'solid',
+        borderLeft: 0,
+        borderRight: 0,
+        borderTop: 0,
+        borderWidth: '1px',
+        display: `${isHidden ? 'none' : 'flex'}`,
+        justifyContent: 'center',
+        alignContent: 'center',
+        position: 'relative',
+      }}
+    >
+      <p style={{ margin: 0 }}>{props.msg}</p>
+      <div onClick={changeVisibility} style={{ position: 'absolute', right: 0, paddingRight: '20px' }}>
+        <XMarkIcon style={{ width: '25px', height: '25px' }} />
+      </div>
+    </div>
+  )
+}

src/data/misc-info.ts

@@ -0,0 +1,6 @@
+/*
+ * Set the variable constant to `null` if you want to no longer show a message.
+ */
+
+export const alertMessage: string =
+  'The Esports Center on Busch Campus is closed until further notice. We apologize for the inconvenience.'

src/pages/index.tsx

@@ -7,6 +7,8 @@ import MeetOurClubs from '../components/meet-our-clubs'
 import Footer from '../components/footer'
 import Head from 'next/head'
 import ContactUs from '@/components/contact-us'
+import AlertBanner from '@/components/banner-alert'
+import { alertMessage } from '@/data/misc-info'
 
 export default function HomePage() {
   return (
@@ -21,6 +23,7 @@ export default function HomePage() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main className={styles['base']}>
+        {alertMessage != '' ? <AlertBanner msg={alertMessage} /> : <></>}
         <NavigationBar />
         <Hero />
         <AboutOurselves />