Add mental health page

pages/mental-health.tsx

@@ -0,0 +1,324 @@
+import {
+  H1,
+  H2,
+  H2i,
+  H2ii,
+  H3,
+  H3i,
+  H3ii,
+  H4,
+  H4i,
+  H4ii,
+  H5,
+  H5i,
+  H6,
+  H7,
+  H8,
+  H9,
+  H9i,
+  H10,
+  H11,
+  H12,
+  H13,
+  H14,
+} from "data/mental-health";
+import { pageRoutes } from "data/routes";
+import React from "react";
+import {
+  barGraphProps,
+  pieChartProps,
+  barGraphWidth,
+} from "utils/defaultProps";
+import { useWindowDimensions } from "utils/getWindowDimensions";
+import { useIsMobile } from "utils/isMobile";
+
+import { BarGraphVertical } from "@/components/BarGraph";
+import { BottomNav } from "@/components/BottomNav";
+import { ComponentWrapper } from "@/components/ComponentWrapper";
+import { Header } from "@/components/Header";
+import { PieChart } from "@/components/PieChart";
+import { QuotationCarousel } from "@/components/QuotationCarousel";
+import { SectionHeader } from "@/components/SectionHeader";
+
+import styles from "./samplePage.module.css";
+
+export default function Demographics() {
+  const pageWidth = useWindowDimensions().width;
+  const isMobile = useIsMobile();
+
+  return (
+    <div className={styles.page}>
+      <Header />
+      <SectionHeader title="Mental Health" />
+
+      <ComponentWrapper
+        heading="Have you struggled with mental health during undergrad?"
+        bodyText="Mental health is a serious issue that affects the well-being of countless students. More than half of our respondants reported that they have struggled with mental health during undergrad. Often times, university can be the cause of stress, anxiety or other forms of mental struggles. Thus, it is crutial to take care of yourself as well as support one another during tough times."
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={H1} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Have you ever experienced burnout?"
+        bodyText="Burnouts are extremely common in our respondents, with the vast majority of people reporting that they have experienced it at some point. The constant demand for work is likely to leave students feeling overwhelmed or emotionally drained. Just keep in mind that it is completely normal to feel this way and remember to let yourself take breaks."
+        align="center"
+        noBackground
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={H2} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Do you feel burnout more during co-op or academic term?"
+        bodyText="Most of our respondents indicated that they are more likely to experience a burnout during their academic terms. This could be due to the amount of course work, assessments, and deadlines that must be met during an academic term. On the plus side, co-op terms give students a break from studying."
+        align="right"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={H2i} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Do you feel burnout more online or in person?"
+        bodyText="It seems like both in person and online terms can cause burnouts. Ultimately, it depends on the individual to decide which option works best for them."
+        align="left"
+        noBackground
+      >
+        <BarGraphVertical
+          data={H2ii}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Have you ever been to therapy?"
+        bodyText="Although some people have seeked out therapy, this number is less than half of the number of people who reported struggling with mental health."
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={H3} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Have you considered going to therapy?"
+        bodyText="Around half of the people who responded this question reported that they have considered therapy. Again, this is almost double the number of respondents who have actually been to therapy. There might be many factors that influenced their decision, including money, time, lack of availability, and social stigma."
+        align="right"
+        noBackground
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={H3i} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="If you have considered going to therapy, what factors prevented you from going?"
+        bodyText="It’s almost common knowledge that seeking help from professionals can dramatically improve one’s well-being. However, many avoidance factors prevent people from doing so. According to our respondents, some of the most common barriers for them include lack of information, money, stereotypes, and lack of time."
+        align="right"
+      >
+        <BarGraphVertical
+          data={H3ii}
+          {...barGraphProps(isMobile, pageWidth)}
+          widthAlternatingLabel={1000}
+          lowerLabelDy="60px"
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Have you ever been to counseling?"
+        bodyText="Out of the 101 people who has responded to this question, 24 reported yes. This number is very similar to the number of people who has been to therapy."
+        align="right"
+        noBackground
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={H4} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Have you considered going to counseling?"
+        bodyText="Interesting, not many of our respondents have considered going to conselling. This is the quit different from the number of people who have considered going to therapy. Perhaps counselling is a generally less well-known service or less referred to terminology than therapy."
+        align="left"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={H4i} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="If you have considered going to counseling, what factors prevented you from going?"
+        bodyText="The factors that limit people from going to counseling are similar to those that limit people from trying out therapy."
+        align="right"
+        noBackground
+      >
+        <BarGraphVertical
+          data={H4ii}
+          {...barGraphProps(isMobile, pageWidth)}
+          widthAlternatingLabel={680}
+          lowerLabelDy="50px"
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Have you used UW Health Services for your mental health?"
+        bodyText="The number of respondents who have used UW health Services for their mental health is similar to those who have seeked out therapy or counselling. UW Health Service provides accessible medical services to all students, mental health being one of them. To book an appointment with them, you can call 519-888-4096."
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={H5} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How was your experience with UW Health Services?"
+        bodyText="The general consensus for the services offered by UW Health Services is that they are mediocre and often pretty busy. Here are some of thefeedbacks that our respondents provided:"
+        noBackground
+      >
+        <div className={styles.quotationCarouselContainer}>
+          <QuotationCarousel
+            data={H5i}
+            circleDiameter={0}
+            width={barGraphWidth(isMobile, pageWidth)}
+            height={200}
+          />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Overall, how would you rate your mental health over your entire undergraduate career?"
+        bodyText="Overall, the majority rated their mental health over their entire undergrad a 3 / 5 or 4 / 5."
+        align="right"
+      >
+        <BarGraphVertical
+          data={H7}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How would you rate your current mental health?"
+        bodyText="Similarity, the majority rated their current mental health and 3 or 4 out of 5. However, more people indicate a mental health score of 4 or 5 out of 5, showing a slight increase in general mental health status after graduation."
+        noBackground
+      >
+        <BarGraphVertical
+          data={H6}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How much do you value your mental health?"
+        bodyText="Thankfully, most people do highly value their mental health. As shown by the stats, most people gave a score on the higher side."
+      >
+        <BarGraphVertical
+          data={H8}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What are some ways you have kept in touch with others during co-op and the pandemic?"
+        align="right"
+        noBackground
+      >
+        <div className={styles.quotationCarouselContainer}>
+          <QuotationCarousel
+            data={H9}
+            circleDiameter={0}
+            width={barGraphWidth(isMobile, pageWidth)}
+            height={200}
+          />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Please give any general comments about mental health in university."
+        bodyText="With mental health being such a large concern in university, many of our respondents have commented on this topic. First, here are some of their quotes about how UW’s environment affects students’ mental health. On the other hand, here are some quotes our respondents provided that may provide helpful suggestions for improving mental health."
+        align="right"
+      >
+        <div className={styles.quotationCarouselContainer}>
+          <QuotationCarousel
+            data={H9i}
+            circleDiameter={0}
+            width={barGraphWidth(isMobile, pageWidth)}
+            height={800}
+          />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Do you feel like you have enough support for your mental health?"
+        bodyText="Most of our respondents indicated that they did feel like they have enough support of their mental health. This could come from freinds, family, faculty stuff members, or professionals."
+        noBackground
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={H10} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What do you do to help cope with your mental health issues?"
+        align="right"
+      >
+        <div className={styles.quotationCarouselContainer}>
+          <QuotationCarousel
+            data={H11}
+            circleDiameter={0}
+            width={barGraphWidth(isMobile, pageWidth)}
+            height={250}
+          />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How does mental health affect different aspects of your life (e.g., relationships, studies, career)?"
+        align="center"
+        noBackground
+      >
+        <div className={styles.quotationCarouselContainer}>
+          <QuotationCarousel
+            data={H12}
+            circleDiameter={0}
+            width={barGraphWidth(isMobile, pageWidth)}
+            height={600}
+          />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Do you feel 'senioritis' at this time?"
+        bodyText="Most students do feel “seniioritis” at the time of this survey."
+        align="right"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={H13} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What do you think UW can do better to accommodate your mental health?"
+        align="center"
+        noBackground
+      >
+        <div className={styles.quotationCarouselContainer}>
+          <QuotationCarousel
+            data={H14}
+            circleDiameter={0}
+            width={barGraphWidth(isMobile, pageWidth)}
+            height={500}
+          />
+        </div>
+      </ComponentWrapper>
+
+      <BottomNav
+        leftPage={pageRoutes.miscellaneous}
+        rightPage={pageRoutes.personal}
+      ></BottomNav>
+    </div>
+  );
+}