diff --git a/src/components/DoorStatus.jsx b/src/components/DoorStatus.jsx new file mode 100644 index 0000000..ddb4076 --- /dev/null +++ b/src/components/DoorStatus.jsx @@ -0,0 +1,58 @@ +import React, { useState, useEffect } from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faDoorOpen, faDoorClosed } from "@fortawesome/free-solid-svg-icons"; + +const DoorStatus = () => { + const [isOpen, setIsOpen] = useState(null); + + const fetchDoorStatus = async () => { + try { + const response = await fetch("https://doors.amoses.dev/door-status"); + const data = await response.json(); + const { door1, door2 } = data.status; + + // 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 + } + }; + + useEffect(() => { + fetchDoorStatus(); + const interval = setInterval(fetchDoorStatus, 500); // fetch every 10 seconds + return () => clearInterval(interval); + }, []); + + return ( + +
+ +
+

+ The doors are{" "} + + {isOpen === null ? "loading..." : isOpen ? "open" : "closed"} + + ! +

+ + ); +}; + +export default DoorStatus; \ No newline at end of file diff --git a/src/components/Header.astro b/src/components/Header.astro index 1f2b6e6..86b1c9d 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,83 +1,91 @@ --- 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: 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", - }, + { + path: "/", + name: "Home", + }, + { + path: "/events", + name: "Events", + }, + { + path: "/blog", + name: "Blog", + }, + { + path: "/resources", + name: "Resources", + }, + { + path: "/about", + name: "About Us", + }, + { + path: "/hours", + name: "Hours", + }, ]; ---
-
-
-
- -
-
    - { - ROUTES.map((e) => ( -
  • - {e.name} -
    • - )) - } -
-
- UPL -
+
+
+
+ +
+
    + { + ROUTES.map((e) => ( +
  • + {e.name} +
    • + )) + } +
+
+ UPL +
- -
+ + +
+
+ +
+
diff --git a/src/pages/about.astro b/src/pages/about.astro index 01f072b..5142a93 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -7,77 +7,70 @@ const CoordsCollection = await getCollection("coordinators"); const coc = await getCollection("docs"); const coc_rendered = await coc - .filter((d: any) => d.id == "Code-of-Conduct.md")[0] - ?.render(); + .filter((d: any) => d.id == "Code-of-Conduct.md")[0] + ?.render(); console.log(coc.map((x) => x.id)); --- -
-
-
-

- Meet the Coords -

-

- These are the people that run the UPL day-to-day. If you - have any questions, reach out to upl(at)cs.wisc.edu -

-
- { - CoordsCollection.filter((d) => d.data.isActive).map( - (coord) => - ) - } -
-
-

- Faculty Advisor -

-

- Our faculty advisor is Professor Bart Miller, who can be - contacted at bart (at) cs.wisc.edu -

-
-
- -
-
-
-
-
- -
-
-
-
-
+
+
+

+ Meet the Coords +

+

+ These are the people that run the UPL day-to-day. If you have any + questions, reach out to upl(at)cs.wisc.edu +

+
+ { + CoordsCollection.filter((d) => d.data.isActive).map((coord) => ( + + )) + } +
+
+

+ Faculty Advisor +

+

+ Our faculty advisor is Professor Bart Miller, who can be contacted + at bart (at) cs.wisc.edu +

+
+
+ +
+
+
+
+
+ +
+
+
+
+ diff --git a/src/pages/index.astro b/src/pages/index.astro index 2a875f0..d28c484 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,6 +3,8 @@ import Layout from "../layouts/Layout.astro"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faDiscord } from "@fortawesome/free-brands-svg-icons"; +import { faDoorOpen, faDoorClosed } from "@fortawesome/free-solid-svg-icons"; + import TypingAnimation from "../components/TypingAnimation.tsx"; const DescriptionStyle = {