Skip to content

Commit ae21c10

Browse files
ShinetopiaShinetopia
committed
Merge branch 'main' into issue-16-Create_ProgressBar_Component
2 parents 3d9df31 + 8ee88cb commit ae21c10

21 files changed

Lines changed: 448 additions & 133 deletions

‎client/public/images/aicode_logo_HD.png‎

194 KB
Loading

‎client/src/components/ui/footer.tsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import Image from "next/image";
2+
import Link from "next/link";
3+
import { useRouter } from "next/router";
4+
import * as React from "react";
5+
import { FaFacebookF, FaInstagram } from "react-icons/fa";
6+
7+
export default function Footer() {
8+
const router = useRouter();
9+
type NavLink = {
10+
label: string;
11+
href: string;
12+
};
13+
const navlinks: NavLink[] = [
14+
{ label: "Home", href: "/" },
15+
{ label: "Schedule", href: "/schedule" },
16+
{ label: "Format & Rules", href: "/format-rules" },
17+
{ label: "Guests & Sponsors", href: "/guests-sponsors" },
18+
{ label: "Leaderboard", href: "/leaderboard" },
19+
];
20+
return (
21+
<footer className="bg-dark px-6 py-12 text-light">
22+
<div className="mx-auto max-w-7xl">
23+
{/* Main content with horizontal line */}
24+
<div className="stroke-3 grid w-full grid-cols-1 gap-y-8 border-b border-secondary pb-8 pr-5 sm:grid-cols-2 lg:grid-cols-[35%_20%_30%_15%]">
25+
{/* Logo */}
26+
<div className="pr-10">
27+
<h2 className="ft-subtitle mb-5">Event Organizers</h2>
28+
<Image
29+
className="mb-5 object-contain pr-8"
30+
src="/images/aicode_logo_HD.png"
31+
alt="AICODE Logo"
32+
width={282}
33+
height={55}
34+
/>
35+
<Image
36+
className="mb-5 object-contain pr-8"
37+
src="https://squadrone.com.au/wp-content/uploads/2024/11/squadrone-logo-01-scaled.webp"
38+
alt="Squadrone Logo"
39+
width={160}
40+
height={56}
41+
/>
42+
</div>
43+
44+
{/* Pages */}
45+
<div className="pr-10">
46+
<h3 className="ft-subtitle mb-3">Quick Links</h3>
47+
<ul className="ft-content mb-2 space-y-4">
48+
{navlinks.map((link) => (
49+
<li key={link.label}>
50+
<Link
51+
href={link.href}
52+
className={
53+
router.pathname === link.href
54+
? "nav-link-active"
55+
: "nav-link-footer"
56+
}
57+
>
58+
{link.label}
59+
</Link>
60+
</li>
61+
))}
62+
</ul>
63+
</div>
64+
65+
{/* Contact Info */}
66+
<div className="pr-10">
67+
<h3 className="ft-subtitle mb-3">Contact Info</h3>
68+
<p className="ft-content mb-2 text-light">
69+
Email:
70+
<br />
71+
<a
72+
href="mailto:info@youthdronetournament.com.au"
73+
className="ft-content break-all underline hover:text-primary"
74+
>
75+
info@youthdronetournament.com.au
76+
</a>
77+
</p>
78+
<p className="ft-content mb-2">
79+
Venue:
80+
<br />
81+
Melbourne Convention Centre
82+
<br />
83+
1 Convention Centre Pl
84+
<br />
85+
South Wharf VIC 3006
86+
</p>
87+
</div>
88+
89+
{/* Socials */}
90+
<div className="pr-5">
91+
<h3 className="ft-subtitle mb-5">Follow Us</h3>
92+
<div className="mb-5 flex gap-4">
93+
<a
94+
href="https://www.facebook.com/people/Squadrone/100094782254912/"
95+
className="flex h-10 w-10 items-center justify-center rounded-full border border-white text-white transition hover:border-primary hover:text-primary"
96+
>
97+
<FaFacebookF size={18} />
98+
</a>
99+
<a
100+
href="https://www.instagram.com/au.Squadrone/#"
101+
className="flex h-10 w-10 items-center justify-center rounded-full border border-white text-white transition hover:border-primary hover:text-primary"
102+
>
103+
<FaInstagram size={18} />
104+
</a>
105+
</div>
106+
<p className="ft-content text-sm text-light">
107+
Stay updated with the latest news and highlights from the
108+
tournament
109+
</p>
110+
</div>
111+
</div>
112+
113+
{/* Centered copyright below the line */}
114+
<p className="ft-content pt-2 text-center text-sm text-light">
115+
Copyright © 2025 Australia Youth Drone Tournament. All Rights
116+
Reserved.
117+
</p>
118+
</div>
119+
</footer>
120+
);
121+
}

‎client/src/components/ui/navbar.tsx‎

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@ export default function Navbar() {
1515
{ label: "Home", href: "/" },
1616
{ label: "Schedule", href: "/schedule" },
1717
{ label: "Format & Rules", href: "/format-rules" },
18-
{ label: "Sponsor & Guest", href: "/sponsor-guest" },
18+
{ label: "Guests & Sponsors", href: "/guests-sponsors" },
1919
{ label: "Leaderboard", href: "/leaderboard" },
2020
];
2121
const handleNav = () => {
2222
setMenuOpen(!menuOpen);
2323
};
2424
return (
25-
<>
26-
<nav className="medium-sm fixed left-0 top-0 flex h-16 w-screen items-center justify-between bg-light">
25+
<div className="fixed left-0 right-0 top-0 h-16 w-full bg-light">
26+
<nav className="medium-sm mx-auto flex h-full max-w-7xl items-center justify-between">
2727
{/* Logo container */}
2828
<div className="relative mx-10 flex h-10 w-28 items-center">
2929
<Image
@@ -37,38 +37,46 @@ export default function Navbar() {
3737

3838
{/* Navbar options/links container */}
3939
<div className="hidden items-center gap-8 lg:flex">
40-
{navlinks.map((link) => (
41-
<Link
42-
key={link.href}
43-
href={link.href}
44-
className={
45-
router.pathname === link.href ? "nav-link-active" : "nav-link"
46-
}
47-
>
48-
{link.label}
49-
</Link>
50-
))}
51-
<div className="mr-10 rounded-2xl bg-primary p-3 px-6 font-semibold text-light">
52-
View Live Results
53-
</div>
40+
{navlinks.map((link) => {
41+
if (link.label === "Leaderboard") {
42+
return (
43+
<Link
44+
className="btn-primary mr-10"
45+
key={link.href}
46+
href={link.href}
47+
>
48+
View Leaderboard
49+
</Link>
50+
);
51+
}
52+
return (
53+
<Link
54+
key={link.href}
55+
href={link.href}
56+
className={
57+
router.pathname === link.href ? "nav-link-active" : "nav-link"
58+
}
59+
>
60+
{link.label}
61+
</Link>
62+
);
63+
})}
5464
</div>
5565
{/* Mobile navbar */}
56-
<div onClick={handleNav} className="mr-5 cursor-pointer lg:hidden">
66+
<button onClick={handleNav} className="mr-5 lg:hidden">
5767
<FiAlignJustify size={35} />
58-
</div>
68+
</button>
5969
</nav>
6070
<div
6171
className={
6272
menuOpen
63-
? "fixed right-0 top-0 h-screen w-[65%] bg-light p-10 shadow-xl duration-500 ease-out"
64-
: "fixed right-[-100%] duration-500 ease-in"
73+
? "fixed right-0 top-0 h-screen w-[300px] bg-light p-10 shadow-xl duration-500 ease-out"
74+
: "fixed -right-full h-screen w-[300px] duration-500 ease-in"
6575
}
6676
>
67-
<div className="flex w-full items-center justify-end">
68-
<div onClick={handleNav} className="cursor-pointer">
69-
<FiX size={35} />
70-
</div>
71-
</div>
77+
<button onClick={handleNav} className="ml-auto block">
78+
<FiX size={35} />
79+
</button>
7280
<div className="medium-sm flex flex-col gap-4">
7381
{navlinks.map((link) => (
7482
<Link
@@ -83,6 +91,6 @@ export default function Navbar() {
8391
))}
8492
</div>
8593
</div>
86-
</>
94+
</div>
8795
);
8896
}

‎client/src/pages/_app.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,22 @@ import "@/styles/globals.css";
33
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
44
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
55
import type { AppProps } from "next/app";
6-
import { Montserrat, Work_Sans } from "next/font/google";
6+
import { Montserrat, Plus_Jakarta_Sans, Work_Sans } from "next/font/google";
7+
8+
import Footer from "../components/ui/footer";
9+
// import { cn } from "@/lib/utils";
10+
import Navbar from "../components/ui/navbar";
711

812
const fontMontserrat = Montserrat({
913
subsets: ["latin"],
1014
variable: "--font-montserrat",
1115
});
1216

17+
const fontPlusJakartaSans = Plus_Jakarta_Sans({
18+
subsets: ["latin"],
19+
variable: "--font-plus-jakarta",
20+
});
21+
1322
const fontWorkSans = Work_Sans({
1423
subsets: ["latin"],
1524
variable: "--font-worksans",
@@ -19,11 +28,18 @@ const queryClient = new QueryClient();
1928

2029
export default function App({ Component, pageProps }: AppProps) {
2130
return (
22-
<div className={`${fontMontserrat.variable} ${fontWorkSans.variable}`}>
31+
<div
32+
className={`${fontMontserrat.variable} ${fontPlusJakartaSans.variable} ${fontWorkSans.variable}`}
33+
>
2334
<QueryClientProvider client={queryClient}>
2435
<ReactQueryDevtools initialIsOpen={false} />
25-
<Component {...pageProps} />
36+
<div className="w-full">
37+
<main className="mx-auto flex min-h-screen max-w-7xl flex-col items-center gap-4 p-24">
38+
<Component {...pageProps} />
39+
</main>
40+
</div>
2641
</QueryClientProvider>
42+
<Footer />
2743
</div>
2844
);
2945
}

‎client/src/pages/format-rules.tsx‎

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,8 @@
1-
import { Inter as FontSans } from "next/font/google";
21
import { useState } from "react";
32

43
import { usePings } from "@/hooks/pings";
5-
import { cn } from "@/lib/utils";
64

75
import { Button } from "../components/ui/button";
8-
import Navbar from "../components/ui/navbar";
9-
10-
const fontSans = FontSans({
11-
subsets: ["latin"],
12-
variable: "--font-sans",
13-
});
146

157
export default function Home() {
168
const [clicked, setClicked] = useState(false);
@@ -19,22 +11,14 @@ export default function Home() {
1911
});
2012

2113
return (
22-
<div>
23-
<Navbar />
24-
<main
25-
className={cn(
26-
"flex min-h-screen flex-col items-center gap-4 p-24 font-sans",
27-
fontSans.variable,
28-
)}
29-
>
30-
<h1 className="title-large text-dark">Title Test</h1>
31-
<Button onClick={() => setClicked(true)}>
32-
{isLoading ? "Loading" : "Ping"}
33-
</Button>
34-
<p>
35-
Response from server: <span>{data as string}</span>
36-
</p>
37-
</main>
38-
</div>
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+
</>
3923
);
4024
}

‎client/src/pages/guests-sponsors.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { useState } from "react";
2+
3+
import { usePings } from "@/hooks/pings";
4+
5+
import { Button } from "../components/ui/button";
6+
7+
export default function Home() {
8+
const [clicked, setClicked] = useState(false);
9+
const { data, isLoading } = usePings({
10+
enabled: clicked,
11+
});
12+
13+
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+
</>
23+
);
24+
}

‎client/src/pages/index.tsx‎

Lines changed: 11 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,8 @@
1-
import { Inter as FontSans } from "next/font/google";
21
import { useState } from "react";
32

43
import { usePings } from "@/hooks/pings";
5-
import { cn } from "@/lib/utils";
64

75
import { Button } from "../components/ui/button";
8-
import Navbar from "../components/ui/navbar";
9-
10-
const fontSans = FontSans({
11-
subsets: ["latin"],
12-
variable: "--font-sans",
13-
});
146

157
export default function Home() {
168
const [clicked, setClicked] = useState(false);
@@ -19,22 +11,16 @@ export default function Home() {
1911
});
2012

2113
return (
22-
<div>
23-
<Navbar />
24-
<main
25-
className={cn(
26-
"flex min-h-screen flex-col items-center gap-4 p-24 font-sans",
27-
fontSans.variable,
28-
)}
29-
>
30-
<h1 className="title-large text-dark">Title Test</h1>
31-
<Button onClick={() => setClicked(true)}>
32-
{isLoading ? "Loading" : "Ping"}
33-
</Button>
34-
<p>
35-
Response from server: <span>{data as string}</span>
36-
</p>
37-
</main>
38-
</div>
14+
<>
15+
{/* Delete after style testing */}
16+
<p className="subtitle text-primary">subtitle with primary colour</p>
17+
<h1 className="title-large text-dark">Test Title</h1>
18+
<Button onClick={() => setClicked(true)}>
19+
{isLoading ? "Loading" : "Ping"}
20+
</Button>
21+
<p>
22+
Response from server: <span>{data as string}</span>
23+
</p>
24+
</>
3925
);
4026
}

0 commit comments

Comments
 (0)