add "check our hours" when doors closed

UW-UPL · Sep 24, 2024 · f7733a5 · f7733a5
1 parent 7700b68
commit f7733a5
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 74 deletions.
diff --git a/src/components/DoorStatus.jsx b/src/components/DoorStatus.jsx
@@ -11,48 +11,53 @@ const DoorStatus = () => {
       const data = await response.json();
       const { door1, door2 } = data.status;
 
-      // determine if the UPL is open
+      // Determine if the UPL is open
       if (door1 === "open" && door2 === "open") {
         setIsOpen(true);
       } else {
         setIsOpen(false);
       }
     } catch (error) {
       console.error("Error fetching door status:", error);
-      setIsOpen(false); // default to closed
+      setIsOpen(false); // Default to closed
     }
   };
 
   useEffect(() => {
     fetchDoorStatus();
-    const interval = setInterval(fetchDoorStatus, 500); // fetch every 10 seconds
+    const interval = setInterval(fetchDoorStatus, 10000); // Fetch every 10 seconds
     return () => clearInterval(interval);
   }, []);
 
   return (
-    <a
-      className={`md:text-md text-sm inline-flex items-center w-fit text-black font-sans font-semibold py-2 px-3 rounded-md focus:outline outline-offset outline-3 outline-sky-300`}
-    >
-      <div className="mr-2 flex-shrink-0">
-        <FontAwesomeIcon icon={isOpen ? faDoorOpen : faDoorClosed} />
+    <div className="md:text-md text-sm inline-flex flex-col items-center w-fit text-black font-sans font-semibold py-2 px-3 rounded-md focus:outline outline-offset outline-3 outline-sky-300 gap-1">
+      <div className="inline-flex items-center">
+        <div className="mr-2 flex-shrink-0">
+          <FontAwesomeIcon icon={isOpen ? faDoorOpen : faDoorClosed} />
+        </div>
+        <p className="flex-nowrap m-0">
+          The doors are{" "}
+          <span
+            className={
+              isOpen === null
+                ? "text-gray-500 font-bold"
+                : isOpen
+                ? "text-green-600 font-bold"
+                : "text-red-600 font-bold"
+            }
+          >
+            {isOpen === null ? "loading..." : isOpen ? "open" : "closed"}
+          </span>
+          !
+        </p>
       </div>
-      <p className="flex-nowrap">
-        The doors are{" "}
-        <span
-          className={
-            isOpen === null
-              ? "text-gray-500 font-bold"
-              : isOpen
-              ? "text-green-600 font-bold"
-              : "text-red-600 font-bold"
-          }
-        >
-          {isOpen === null ? "loading..." : isOpen ? "open" : "closed"}
-        </span>
-        !
-      </p>
-    </a>
+      {!isOpen && isOpen !== null && (
+        <a href="/hours" className="text-blue-800 underline m-0">
+          Check our hours here.
+        </a>
+      )}
+    </div>
   );
 };
 
-export default DoorStatus;
+export default DoorStatus;
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,37 +1,14 @@
 ---
 import HeaderLink from "./HeaderLink.astro";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faDoorOpen, faDoorClosed } from "@fortawesome/free-solid-svg-icons";
 import DoorStatus from "./DoorStatus.jsx";
 
-const ROUTES: {
-  path: string;
-  name: string;
-}[] = [
-  {
-    path: "/",
-    name: "Home",
-  },
-  {
-    path: "/events",
-    name: "Events",
-  },
-  {
-    path: "/blog",
-    name: "Blog",
-  },
-  {
-    path: "/resources",
-    name: "Resources",
-  },
-  {
-    path: "/about",
-    name: "About Us",
-  },
-  {
-    path: "/hours",
-    name: "Hours",
-  },
+const ROUTES = [
+  { path: "/", name: "Home" },
+  { path: "/events", name: "Events" },
+  { path: "/blog", name: "Blog" },
+  { path: "/resources", name: "Resources" },
+  { path: "/about", name: "About Us" },
+  { path: "/hours", name: "Hours" },
 ];
 ---
 
@@ -45,41 +22,40 @@ const ROUTES: {
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
-          ><path
+        >
+          <path
             stroke-linecap="round"
             stroke-linejoin="round"
             stroke-width="2"
-            d="M4 6h16M4 12h8m-8 6h16"></path></svg
-        >
+            d="M4 6h16M4 12h8m-8 6h16"
+          ></path>
+        </svg>
       </div>
       <ul
         tabindex="0"
         class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
       >
-        {
-          ROUTES.map((e) => (
-            <li class="text-red-500 font-bold">
-              <HeaderLink href={e.path}>{e.name}</HeaderLink>
-            </li>
-          ))
-        }
+        {ROUTES.map((e) => (
+          <li class="text-red-500 font-bold">
+            <HeaderLink href={e.path}>{e.name}</HeaderLink>
+          </li>
+        ))}
       </ul>
     </div>
     <a
       class="btn btn-ghost text-red-500 lg:text-5xl text-xl font-semibold"
-      href="/">UPL</a
+      href="/"
+      >UPL</a
     >
   </div>
 
   <div class="navbar-center hidden lg:flex">
     <ul class="menu menu-horizontal px-1 text-lg">
-      {
-        ROUTES.map((e) => (
-          <li class="text-red-500 font-bold">
-            <HeaderLink href={e.path}>{e.name}</HeaderLink>
-          </li>
-        ))
-      }
+      {ROUTES.map((e) => (
+        <li class="text-red-500 font-bold">
+          <HeaderLink href={e.path}>{e.name}</HeaderLink>
+        </li>
+      ))}
     </ul>
   </div>
   <!-- this is the door label -->
@@ -88,4 +64,4 @@ const ROUTES: {
       <DoorStatus client:load />
     </div>
   </div>
-</div>
+</div>