Clinic Schedules Page Mobile Layout

app/(pages)/_components/ClinicSchedulesCard/ClinicSchedulesCard.jsx

@@ -0,0 +1,33 @@
+"use client";
+import styles from "./ClinicSchedulesCard.module.scss";
+import { MdInsertInvitation } from "react-icons/md";
+import { IoMdInformationCircle } from "react-icons/io";
+
+export default function ClinicSchedulesCard({ key, clinic }) {
+  return (
+    <div key={key} className={styles.card}>
+      <div className={styles.info}>
+        <h4>{clinic.title}</h4>
+        <p>{clinic.paragraph}</p>
+        <div className={styles.tm}>
+          <div className={styles.text}>
+            <MdInsertInvitation size={24} color="var(--emerald)" />
+            <p>{clinic.time}</p>
+          </div>
+          <div className={styles.text}>
+            <IoMdInformationCircle size={24} color="var(--emerald)" />
+            <p>{clinic.message}</p>
+          </div>
+        </div>
+      </div>
+      {(clinic.action === null) != (clinic.button_text === null) &&
+      clinic.action === null ? (
+        <a target="_blank" href={clinic.button_link} className="btn">
+          {clinic.button_text}
+        </a>
+      ) : (
+        <p className={styles.action}>{clinic.action}</p>
+      )}
+    </div>
+  );
+}

app/(pages)/_components/ClinicSchedulesCard/ClinicSchedulesCard.module.scss

@@ -0,0 +1,45 @@
+@use "@/app/(pages)/_globals/mixins.scss";
+
+.card {
+  display: flex;
+  flex-direction: column;
+  width: calc(8px * 104);
+  background-color: var(--white);
+  box-shadow: var(--drop-shadow);
+  border-radius: var(--card-border-radius);
+  padding: var(--card-padding);
+  gap: 50px;
+
+  @include mixins.tablet {
+    gap: 16px;
+    width: 90%;
+  }
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 12px;
+}
+
+.tm {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.text {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.text p {
+  padding-left: 12px;
+}
+
+.appt {
+  color: var(--teal);
+  font-weight: var(--bold);
+}

app/(pages)/_components/Footer/Footer.module.scss

@@ -33,7 +33,7 @@ $logo-width: calc(8px * 20);
   grid-column: 1;
   grid-row: 1;
 
-  @include mixins.phone {
+  @include mixins.tablet {
     grid-column: 1;
     grid-row: 1;
     justify-self: center;

app/(pages)/_data/clinic-schedule.json

@@ -1,46 +1,28 @@
-{
-  "title": "Calendar & Clinic Schedules",
-  "subtitle": "Need an appointment? Check availability and schedule one with our clincs now.",
-
-  "gradient": "/images/clinicScheduleGradient.png",
-  "gradient_alt": "Background Gradient",
-
-  "info": {
-    "jvmc": {
+[
+    {
+      "color": "#abdccf",
       "title": "JVMC Clinic",
       "paragraph": "JVMC Clinic provides free primary health care services to individuals using intravenous drugs, work in the sex trade, or identify as transgender.",
       "time": "Saturdays, 1:00 pm - 4:00 pm.",
       "message": "No appointments, walk-ins only.",
-      "appt": "Walk-Ins only."
+      "action": "Walk-Ins only."
     },
-    "rhc": {
+    {
+      "color": "#094935",
       "title": "Reproductive Health Clinic",
       "paragraph": "The Reproductive Health Clinic provides sexual and reproductive clinical care such as IUDs, STI testing/treatment, and menstrual products.",
       "time": "Last Saturday of every month, 1:00 pm - 4:00 pm.",
       "message": "Call or text to schedule an appointment.",
-      "appt": "Call (916)-538-9538"
+      "action": "Call (916)-538-9538"
     },
-    "ghc": {
+    {
+      "color": "#01887a",
       "title": "Gender Health Center",
       "paragraph": "GHC offers free or low-cost health, legal, and support services for trans and gender-expansive communities.",
       "time": "1st and 3rd Friday of each month, 6:00pm - 9:00pm.",
       "message": "Appointments are made on the GHC website.",
-      "appt": "button"
+      "action": null,
+      "button_text": "Visit GHC Website",
+      "button_link": "https://www.genderhealthcenter.org/"
     }
-  },
-
-  "key": {
-    "rhc": {
-      "title": "Reproductive Health Clinic",
-      "color": "--emerald"
-    },
-    "jvmc": {
-      "title": "JVMC Clinic",
-      "color": "--mint"
-    },
-    "ghc": {
-      "title": "Gender Health Center",
-      "color": "--teal"
-    }
-  }
-}
+  ]

app/(pages)/clinic-schedule/page.jsx

@@ -1,22 +1,33 @@
-"use client";
 import styles from "./page.module.scss";
 import Image from "next/image";
-import data from "../_data/clinic-schedule.json";
-import { MdInsertInvitation } from "react-icons/md";
-import { IoMdInformationCircle } from "react-icons/io";
+import ClinicCardFallbackData from "../_data/clinic-schedule.json";
+import ClinicSchedulesCard from "../_components/ClinicSchedulesCard/ClinicSchedulesCard";
+
+async function getClinicSchedulesCards() {
+  return ClinicCardFallbackData;
+}
+
+export default async function ClinicSchedule() {
+  const data = await getClinicSchedulesCards();
 
-export default function ClinicSchedule() {
   return (
     <main>
       <div className={styles.page}>
         <div className={styles.header}>
-          <h1>{data.title}</h1>
-          <h4>{data.subtitle}</h4>
+          <h1>Calendar & Clinic Schedules</h1>
+          <h4>
+            Need an appointment? Check availability and schedule one with our
+            clincs now.
+          </h4>
         </div>
 
         <div className={styles.gradientContainer}>
           <div className={styles.gradient}>
-            <Image src={data.gradient} alt={data.gradient_alt} fill={true} />
+            <Image
+              src="/images/clinicScheduleGradient.png"
+              alt="Background Gradient"
+              fill={true}
+            />
           </div>
         </div>
 
@@ -26,51 +37,27 @@ export default function ClinicSchedule() {
               src="https://calendar.google.com/calendar/embed?src=a6298014dd9ccad37eb2b34842045e9e6991da9348b88ce3139b4688cb07bf58%40group.calendar.google.com&ctz=America%2FLos_Angeles"
               width="1040"
               height="696"
-            ></iframe>
+            />
           </div>
           <div className={styles.key}>
             <h4>Calendar Key</h4>
-            {Object.entries(data.key).map(([key, clinic]) => (
-              <div key={key} className={styles.keyElem}>
-                <div
-                  className={styles.circ}
-                  style={{ backgroundColor: `var(${clinic.color})` }}
-                ></div>
-                <p className={styles.title}>{clinic.title}</p>
-              </div>
-            ))}
+            <ul>
+              {data.map((clinic, key) => (
+                <li key={key} className={styles.keyElem}>
+                  <div
+                    className={styles.circ}
+                    style={{ backgroundColor: `${clinic.color}` }}
+                  />
+                  <p className={styles.title}>{clinic.title}</p>
+                </li>
+              ))}
+            </ul>
           </div>
         </div>
 
         <div className={styles.infocards}>
-          {Object.entries(data.info).map(([key, clinic]) => (
-            <div key={key} className={styles.card}>
-              <div className={styles.info}>
-                <h4>{clinic.title}</h4>
-                <p>{clinic.paragraph}</p>
-                <div className={styles.tm}>
-                  <div className={styles.text}>
-                    <MdInsertInvitation size={24} color="var(--emerald)" />
-                    <p>{clinic.time}</p>
-                  </div>
-                  <div className={styles.text}>
-                    <IoMdInformationCircle size={24} color="var(--emerald)" />
-                    <p>{clinic.message}</p>
-                  </div>
-                </div>
-              </div>
-              {clinic.appt === "button" ? (
-                <a
-                  target="_blank"
-                  href="https://www.genderhealthcenter.org"
-                  className="btn"
-                >
-                  Visit GHC Website
-                </a>
-              ) : (
-                <p className={styles.appt}>{clinic.appt}</p>
-              )}
-            </div>
+          {data.map((clinic, key) => (
+            <ClinicSchedulesCard key={key} clinic={clinic} />
           ))}
         </div>
       </div>