Skip to content

Commit 0e734bb

Browse files
allyharrisonallyharrison
authored
Merge pull request #29 from codersforcauses/issue-6-Create_schedule_page
Issue 6 create schedule page
2 parents 38c7068 + 992588d commit 0e734bb

8 files changed

Lines changed: 159 additions & 37 deletions

File tree

‎client/public/ProgressBar1.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎client/public/drone.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎client/public/placeholder-svg.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎client/src/components/ui/SchedulePage/EventCard.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import Image from "next/image";
2+
3+
type EventCardProps = {
4+
date: string;
5+
title: string;
6+
location: string;
7+
time: string;
8+
description: string;
9+
imageSrc: string;
10+
};
11+
12+
export default function EventCard({
13+
date,
14+
title,
15+
location,
16+
time,
17+
description,
18+
imageSrc,
19+
}: EventCardProps) {
20+
return (
21+
<div className="mb-14 flex items-start gap-4 rounded-3xl bg-gray-100 p-6">
22+
{/* Text */}
23+
<div className="min-w-0 flex-[5] pr-4 pt-2">
24+
<p className="body-lg mb-1 text-secondary">{date}</p>
25+
<h2 className="subtitle mb-3">{title}</h2>
26+
<div className="mb-3 flex items-center gap-2">
27+
<svg
28+
xmlns="http://www.w3.org/2000/svg"
29+
fill="none"
30+
viewBox="0 0 24 24"
31+
strokeWidth={1.5}
32+
stroke="currentColor"
33+
className="size-5 flex-shrink-0 text-secondary"
34+
>
35+
<path
36+
strokeLinecap="round"
37+
strokeLinejoin="round"
38+
d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
39+
/>
40+
<path
41+
strokeLinecap="round"
42+
strokeLinejoin="round"
43+
d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
44+
/>
45+
</svg>
46+
<p className="text-text">{location}</p>
47+
</div>
48+
<div className="mb-3 flex items-center gap-2">
49+
<svg
50+
xmlns="http://www.w3.org/2000/svg"
51+
fill="none"
52+
viewBox="0 0 24 24"
53+
strokeWidth={1.5}
54+
stroke="currentColor"
55+
className="size-5 flex-shrink-0 text-secondary"
56+
>
57+
<path
58+
strokeLinecap="round"
59+
strokeLinejoin="round"
60+
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
61+
/>
62+
</svg>
63+
<p className="text-text">{time}</p>
64+
</div>
65+
<p className="line-clamp-3 text-text">{description}</p>
66+
</div>
67+
{/* Image */}
68+
<div className="relative h-[333px] min-w-[411px] flex-[3]">
69+
<Image
70+
src={imageSrc}
71+
alt="placeholder-svg"
72+
fill
73+
className="rounded-2xl object-cover"
74+
priority
75+
/>
76+
</div>
77+
</div>
78+
);
79+
}

‎client/src/components/ui/SchedulePage/index.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import Image from "next/image";
2+
3+
import EventCard from "./EventCard";
4+
5+
export default function SchedulePage() {
6+
return (
7+
<div>
8+
<h1 className="title-large text-center font-bold text-dark">
9+
{" "}
10+
Drone Competition Schedule{" "}
11+
</h1>
12+
<div className="relative mx-auto h-[80px] w-[1100px]">
13+
<Image
14+
src="/ProgressBar1.svg"
15+
alt="Progress Bar"
16+
fill
17+
className="object-contain"
18+
priority
19+
/>
20+
</div>
21+
<p className="medium-lg pt-8">Our next competition is: </p>
22+
<p className="subtitle pb-8 font-bold">Monday - July 9th, 2025</p>
23+
24+
<EventCard
25+
date="Monday - 9 July 2025"
26+
title="Group Stages Start"
27+
location="Melbourne Convention Centre"
28+
time="5:00pm - 8:00pm"
29+
description="The first stage of the competition kicks off with teams battling it out in the group round."
30+
imageSrc="/drone.svg"
31+
/>
32+
33+
<EventCard
34+
date="Tuesday - 10 July 2025"
35+
title="Knockout Stages Start"
36+
location="Murdoch University"
37+
time="1:00pm - 4:00pm"
38+
description="Knock out each other!"
39+
imageSrc="/drone.svg"
40+
/>
41+
<EventCard
42+
date="Wednesday - 11 July 2025"
43+
title="Finals Day"
44+
location="Location"
45+
time="5:00pm - 8:00pm"
46+
description="The final match to determine the drone champion of 2025!"
47+
imageSrc="/drone.svg"
48+
/>
49+
</div>
50+
);
51+
}

‎client/src/pages/_app.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,6 @@ import { Montserrat, Plus_Jakarta_Sans, Work_Sans } from "next/font/google";
77

88
import Footer from "../components/ui/footer";
99

10-
// import { cn } from "@/lib/utils";
11-
import Navbar from "../components/ui/navbar";
12-
1310
const fontMontserrat = Montserrat({
1411
subsets: ["latin"],
1512
variable: "--font-montserrat",

‎client/src/pages/schedule.tsx‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
1-
import { useState } from "react";
1+
import { Inter as FontSans } from "next/font/google";
22

3-
import { usePings } from "@/hooks/pings";
3+
import { cn } from "@/lib/utils";
44

5-
import { Button } from "../components/ui/button";
5+
import SchedulePage from "../components/ui/SchedulePage";
66

7-
export default function Home() {
8-
const [clicked, setClicked] = useState(false);
9-
const { data, isLoading } = usePings({
10-
enabled: clicked,
11-
});
7+
const fontSans = FontSans({
8+
subsets: ["latin"],
9+
variable: "--font-sans",
10+
});
1211

12+
export default function Schedule() {
1313
return (
14-
<>
15-
<h1 className="title-large text-dark">Title Test</h1>
16-
<Button onClick={() => setClicked(true)}>
17-
{isLoading ? "Loading" : "Ping"}
18-
</Button>
19-
<p>
20-
Response from server: <span>{data as string}</span>
21-
</p>
22-
</>
14+
<main
15+
className={cn(
16+
"flex min-h-screen flex-col items-center gap-4 bg-light p-24 font-sans",
17+
fontSans.variable,
18+
)}
19+
>
20+
<SchedulePage />
21+
</main>
2322
);
2423
}

‎server/.env.example‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

0 commit comments

Comments
 (0)