added office status component

fix lint

only homepage & added link to about us section

add logic

fix lint

test

test

test

d

d

components/OfficeStatus.module.css

@@ -0,0 +1,73 @@
+.status {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.status .circle {
+  border-radius: 100%;
+  height: 100px;
+  width: 100px;
+  background-color: var(--card-background);
+  border: 0.3rem var(--link) solid;
+}
+
+.status .bubble {
+  padding: 5px 10px;
+  border-radius: 0.4rem;
+  background-color: white;
+  -webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.2); 
+  box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.15);
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+
+.status .arrow {
+  width: 0; 
+  height: 0; 
+  margin-top: -1px;
+  margin-bottom: 0.5rem;
+  height: 10px;
+  width: 10px;
+  background-color: white;
+  clip-path: polygon(50% 100%, 0 0, 100% 0);
+}
+
+.status .dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 100%;
+}
+
+.status .offline {
+  background-color: lightgrey;
+}
+
+.status .online {
+  background-color: var(--link);
+}
+
+.status .graphic {
+  width: inherit;
+  height: inherit;
+  clip-path: circle(50% at 50% 50%);
+}
+
+.status .text {
+  width: 120px;
+  font-size: small;
+  line-height: 100%;
+  text-align: center;
+  color: var(--light--secondary-subtitle);
+}
+
+.status:hover {
+  cursor: pointer;
+}
+
+.fixed {
+  position: fixed;
+  bottom: 5%;
+  right: 5%;
+}

components/OfficeStatus.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from "react";
+
+import styles from "./OfficeStatus.module.css";
+
+interface OfficeStatusProps {
+  href?: string;
+  fixed: boolean;
+}
+
+type OfficeStatusResponse = {
+  status: number;
+  time: number;
+};
+
+export const OfficeStatus: React.FC<OfficeStatusProps> = ({ href, fixed }) => {
+  const [online, setOnline] = useState(false);
+
+  useEffect(() => {
+    void fetch("https://csclub.uwaterloo.ca/~webcom/office-status.json").then(
+      async (res) => {
+        const data: OfficeStatusResponse =
+          (await res.json()) as unknown as OfficeStatusResponse;
+        setOnline(data.status === 1);
+      }
+    );
+  }, []);
+
+  return (
+    <div
+      className={`${styles.status} ${fixed ? styles.fixed : ""}`}
+      onClick={() => {
+        window.open(href);
+      }}
+    >
+      <div className={styles.bubble}>
+        <div
+          className={`${styles.dot} ${online ? styles.online : styles.offline}`}
+        />
+        <div className={styles.text}>
+          {online
+            ? "Come visit, the office is open!"
+            : "Our office is closed right now"}
+        </div>
+      </div>
+      <div className={styles.arrow} />
+      <div className={styles.circle}>
+        <img
+          className={styles.graphic}
+          src={
+            online
+              ? "images/office-status/codeyHi.png"
+              : "images/office-status/codeySad.png"
+          }
+        />
+      </div>
+    </div>
+  );
+};

content/about/index.mdx

@@ -1,4 +1,5 @@
 import { Bubble } from "@/components/Bubble";
+import { OfficeStatus } from "@/components/OfficeStatus";
 
 <Bubble>
 
@@ -56,6 +57,7 @@ page to stay updated!
 
 </Bubble>
 
+<div id="our-office">
 <Bubble>
 
 ## Our <span>Office</span>
@@ -71,6 +73,9 @@ Building of the University of Waterloo.
 Come visit us on campus in our office! Meet new members and find out what's new
 in the club.
 
+<div style={{ display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"}}>
 <address>
 
 Computer Science Club  
@@ -83,5 +88,8 @@ Canada
 Our office phone number is [(519) 888-4567 x33870](tel:+15198884567,33870).
 
 </address>
+<OfficeStatus/>
+</div>
 
 </Bubble>
+</div>

pages/index.tsx

@@ -9,6 +9,7 @@ import { EventDescriptionCard } from "@/components/EventDescriptionCard";
 import { Image } from "@/components/Image";
 import { Link } from "@/components/Link";
 import { NewsCard } from "@/components/NewsCard";
+import { OfficeStatus } from "@/components/OfficeStatus";
 import { GetShapesConfig } from "@/components/ShapesBackground";
 import { SocialLinks } from "@/components/SocialLinks";
 import { Title } from "@/components/Title";
@@ -112,6 +113,7 @@ export default function Home(props: Props) {
         <ConnectWithUs />
         <EmailSignup />
       </DefaultLayout>
+      <OfficeStatus href="/about/#our-office" fixed />
     </>
   );
 }