Skip to content

Commit 34881fb

Browse files
C3vicheC3viche
authored
Merge pull request #52 from include-davis/31-clinic-schedules-mobile
Clinic Schedules Page Mobile Layout
2 parents d44832f + d43e047 commit 34881fb

File tree

7 files changed

+181
-122
lines changed

7 files changed

+181
-122
lines changed

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
"use client";
2+
import styles from "./ClinicSchedulesCard.module.scss";
3+
import { MdInsertInvitation } from "react-icons/md";
4+
import { IoMdInformationCircle } from "react-icons/io";
5+
6+
export default function ClinicSchedulesCard({ key, clinic }) {
7+
return (
8+
<div key={key} className={styles.card}>
9+
<div className={styles.info}>
10+
<h4>{clinic.title}</h4>
11+
<p>{clinic.paragraph}</p>
12+
<div className={styles.tm}>
13+
<div className={styles.text}>
14+
<MdInsertInvitation size={24} color="var(--emerald)" />
15+
<p>{clinic.time}</p>
16+
</div>
17+
<div className={styles.text}>
18+
<IoMdInformationCircle size={24} color="var(--emerald)" />
19+
<p>{clinic.message}</p>
20+
</div>
21+
</div>
22+
</div>
23+
{(clinic.action === null) != (clinic.button_text === null) &&
24+
clinic.action === null ? (
25+
<a target="_blank" href={clinic.button_link} className="btn">
26+
{clinic.button_text}
27+
</a>
28+
) : (
29+
<p className={styles.action}>{clinic.action}</p>
30+
)}
31+
</div>
32+
);
33+
}

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@use "@/app/(pages)/_globals/mixins.scss";
2+
3+
.card {
4+
display: flex;
5+
flex-direction: column;
6+
width: calc(8px * 104);
7+
background-color: var(--white);
8+
box-shadow: var(--drop-shadow);
9+
border-radius: var(--card-border-radius);
10+
padding: var(--card-padding);
11+
gap: 50px;
12+
13+
@include mixins.tablet {
14+
gap: 16px;
15+
width: 90%;
16+
}
17+
}
18+
19+
.info {
20+
display: flex;
21+
flex-direction: column;
22+
width: 100%;
23+
gap: 12px;
24+
}
25+
26+
.tm {
27+
display: flex;
28+
flex-direction: column;
29+
gap: 12px;
30+
}
31+
32+
.text {
33+
display: flex;
34+
flex-direction: row;
35+
align-items: center;
36+
}
37+
38+
.text p {
39+
padding-left: 12px;
40+
}
41+
42+
.appt {
43+
color: var(--teal);
44+
font-weight: var(--bold);
45+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ $logo-width: calc(8px * 20);
3333
grid-column: 1;
3434
grid-row: 1;
3535

36-
@include mixins.phone {
36+
@include mixins.tablet {
3737
grid-column: 1;
3838
grid-row: 1;
3939
justify-self: center;

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

Lines changed: 13 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,28 @@
1-
{
2-
"title": "Calendar & Clinic Schedules",
3-
"subtitle": "Need an appointment? Check availability and schedule one with our clincs now.",
4-
5-
"gradient": "/images/clinicScheduleGradient.png",
6-
"gradient_alt": "Background Gradient",
7-
8-
"info": {
9-
"jvmc": {
1+
[
2+
{
3+
"color": "#abdccf",
104
"title": "JVMC Clinic",
115
"paragraph": "JVMC Clinic provides free primary health care services to individuals using intravenous drugs, work in the sex trade, or identify as transgender.",
126
"time": "Saturdays, 1:00 pm - 4:00 pm.",
137
"message": "No appointments, walk-ins only.",
14-
"appt": "Walk-Ins only."
8+
"action": "Walk-Ins only."
159
},
16-
"rhc": {
10+
{
11+
"color": "#094935",
1712
"title": "Reproductive Health Clinic",
1813
"paragraph": "The Reproductive Health Clinic provides sexual and reproductive clinical care such as IUDs, STI testing/treatment, and menstrual products.",
1914
"time": "Last Saturday of every month, 1:00 pm - 4:00 pm.",
2015
"message": "Call or text to schedule an appointment.",
21-
"appt": "Call (916)-538-9538"
16+
"action": "Call (916)-538-9538"
2217
},
23-
"ghc": {
18+
{
19+
"color": "#01887a",
2420
"title": "Gender Health Center",
2521
"paragraph": "GHC offers free or low-cost health, legal, and support services for trans and gender-expansive communities.",
2622
"time": "1st and 3rd Friday of each month, 6:00pm - 9:00pm.",
2723
"message": "Appointments are made on the GHC website.",
28-
"appt": "button"
24+
"action": null,
25+
"button_text": "Visit GHC Website",
26+
"button_link": "https://www.genderhealthcenter.org/"
2927
}
30-
},
31-
32-
"key": {
33-
"rhc": {
34-
"title": "Reproductive Health Clinic",
35-
"color": "--emerald"
36-
},
37-
"jvmc": {
38-
"title": "JVMC Clinic",
39-
"color": "--mint"
40-
},
41-
"ghc": {
42-
"title": "Gender Health Center",
43-
"color": "--teal"
44-
}
45-
}
46-
}
28+
]

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

Lines changed: 33 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,33 @@
1-
"use client";
21
import styles from "./page.module.scss";
32
import Image from "next/image";
4-
import data from "../_data/clinic-schedule.json";
5-
import { MdInsertInvitation } from "react-icons/md";
6-
import { IoMdInformationCircle } from "react-icons/io";
3+
import ClinicCardFallbackData from "../_data/clinic-schedule.json";
4+
import ClinicSchedulesCard from "../_components/ClinicSchedulesCard/ClinicSchedulesCard";
5+
6+
async function getClinicSchedulesCards() {
7+
return ClinicCardFallbackData;
8+
}
9+
10+
export default async function ClinicSchedule() {
11+
const data = await getClinicSchedulesCards();
712

8-
export default function ClinicSchedule() {
913
return (
1014
<main>
1115
<div className={styles.page}>
1216
<div className={styles.header}>
13-
<h1>{data.title}</h1>
14-
<h4>{data.subtitle}</h4>
17+
<h1>Calendar & Clinic Schedules</h1>
18+
<h4>
19+
Need an appointment? Check availability and schedule one with our
20+
clincs now.
21+
</h4>
1522
</div>
1623

1724
<div className={styles.gradientContainer}>
1825
<div className={styles.gradient}>
19-
<Image src={data.gradient} alt={data.gradient_alt} fill={true} />
26+
<Image
27+
src="/images/clinicScheduleGradient.png"
28+
alt="Background Gradient"
29+
fill={true}
30+
/>
2031
</div>
2132
</div>
2233

@@ -26,51 +37,27 @@ export default function ClinicSchedule() {
2637
src="https://calendar.google.com/calendar/embed?src=a6298014dd9ccad37eb2b34842045e9e6991da9348b88ce3139b4688cb07bf58%40group.calendar.google.com&ctz=America%2FLos_Angeles"
2738
width="1040"
2839
height="696"
29-
></iframe>
40+
/>
3041
</div>
3142
<div className={styles.key}>
3243
<h4>Calendar Key</h4>
33-
{Object.entries(data.key).map(([key, clinic]) => (
34-
<div key={key} className={styles.keyElem}>
35-
<div
36-
className={styles.circ}
37-
style={{ backgroundColor: `var(${clinic.color})` }}
38-
></div>
39-
<p className={styles.title}>{clinic.title}</p>
40-
</div>
41-
))}
44+
<ul>
45+
{data.map((clinic, key) => (
46+
<li key={key} className={styles.keyElem}>
47+
<div
48+
className={styles.circ}
49+
style={{ backgroundColor: `${clinic.color}` }}
50+
/>
51+
<p className={styles.title}>{clinic.title}</p>
52+
</li>
53+
))}
54+
</ul>
4255
</div>
4356
</div>
4457

4558
<div className={styles.infocards}>
46-
{Object.entries(data.info).map(([key, clinic]) => (
47-
<div key={key} className={styles.card}>
48-
<div className={styles.info}>
49-
<h4>{clinic.title}</h4>
50-
<p>{clinic.paragraph}</p>
51-
<div className={styles.tm}>
52-
<div className={styles.text}>
53-
<MdInsertInvitation size={24} color="var(--emerald)" />
54-
<p>{clinic.time}</p>
55-
</div>
56-
<div className={styles.text}>
57-
<IoMdInformationCircle size={24} color="var(--emerald)" />
58-
<p>{clinic.message}</p>
59-
</div>
60-
</div>
61-
</div>
62-
{clinic.appt === "button" ? (
63-
<a
64-
target="_blank"
65-
href="https://www.genderhealthcenter.org"
66-
className="btn"
67-
>
68-
Visit GHC Website
69-
</a>
70-
) : (
71-
<p className={styles.appt}>{clinic.appt}</p>
72-
)}
73-
</div>
59+
{data.map((clinic, key) => (
60+
<ClinicSchedulesCard key={key} clinic={clinic} />
7461
))}
7562
</div>
7663
</div>

0 commit comments

Comments
 (0)