Skip to content

Commit 74d0da9

Browse files
survivzhangsurvivzhang
committed
the nav bar text color flow with the path and build empty route to test
1 parent dee1c35 commit 74d0da9

5 files changed

Lines changed: 193 additions & 30 deletions

File tree

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

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,17 @@ import { FiAlignJustify, FiX } from "react-icons/fi";
77
export default function Navbar() {
88
const router = useRouter();
99
const [menuOpen, setMenuOpen] = useState(false);
10+
type NavLink = {
11+
label: string;
12+
href: string;
13+
};
14+
const navlinks: NavLink[] = [
15+
{ label: "Home", href: "/" },
16+
{ label: "Schedule", href: "/schedule" },
17+
{ label: "Format & Rules", href: "/format-rules" },
18+
{ label: "Sponsor & Guest", href: "/sponsor-guest" },
19+
{ label: "Leaderboard", href: "/leaderboard" },
20+
];
1021
const handleNav = () => {
1122
setMenuOpen(!menuOpen);
1223
};
@@ -27,21 +38,17 @@ export default function Navbar() {
2738

2839
{/* Navbar traversal options container */}
2940
<div className="hidden items-center gap-8 sm:flex">
30-
<Link href="/" className="nav-link-active">
31-
Home
32-
</Link>
33-
<Link href="/schedule" className="nav-link">
34-
Schedule
35-
</Link>
36-
<Link href="/format-rules" className="nav-link text-dark">
37-
Format & Rules
38-
</Link>
39-
<Link href="/sponsor-guest" className="nav-link text-dark">
40-
Sponsor & Guest
41-
</Link>
42-
<Link href="/leaderboard" className="nav-link text-dark">
43-
Leaderboard
44-
</Link>
41+
{navlinks.map((link) => (
42+
<Link
43+
key={link.href}
44+
href={link.href}
45+
className={
46+
router.pathname === link.href ? "nav-link-active" : "nav-link"
47+
}
48+
>
49+
{link.label}
50+
</Link>
51+
))}
4552
<div className="mr-10 rounded-2xl bg-primary p-3 px-6 font-semibold text-light">
4653
View Live Results
4754
</div>
@@ -63,21 +70,17 @@ export default function Navbar() {
6370
</div>
6471
</div>
6572
<div className="flex flex-col py-6">
66-
<Link href="/" className="nav-link-active">
67-
Home
68-
</Link>
69-
<Link href="/schedule" className="nav-link">
70-
Schedule
71-
</Link>
72-
<Link href="/format-rules" className="nav-link text-dark">
73-
Format & Rules
74-
</Link>
75-
<Link href="/sponsor-guest" className="nav-link text-dark">
76-
Sponsor & Guest
77-
</Link>
78-
<Link href="/leaderboard" className="nav-link text-dark">
79-
Leaderboard
80-
</Link>
73+
{navlinks.map((link) => (
74+
<Link
75+
key={link.href}
76+
href={link.href}
77+
className={
78+
router.pathname === link.href ? "nav-link-active" : "nav-link"
79+
}
80+
>
81+
{link.label}
82+
</Link>
83+
))}
8184
</div>
8285
</div>
8386
</>

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Inter as FontSans } from "next/font/google";
2+
import { useState } from "react";
3+
4+
import { usePings } from "@/hooks/pings";
5+
import { cn } from "@/lib/utils";
6+
7+
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+
});
14+
15+
export default function Home() {
16+
const [clicked, setClicked] = useState(false);
17+
const { data, isLoading } = usePings({
18+
enabled: clicked,
19+
});
20+
21+
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>
39+
);
40+
}

‎client/src/pages/leaderboard.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Inter as FontSans } from "next/font/google";
2+
import { useState } from "react";
3+
4+
import { usePings } from "@/hooks/pings";
5+
import { cn } from "@/lib/utils";
6+
7+
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+
});
14+
15+
export default function Home() {
16+
const [clicked, setClicked] = useState(false);
17+
const { data, isLoading } = usePings({
18+
enabled: clicked,
19+
});
20+
21+
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>
39+
);
40+
}

‎client/src/pages/schedule.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Inter as FontSans } from "next/font/google";
2+
import { useState } from "react";
3+
4+
import { usePings } from "@/hooks/pings";
5+
import { cn } from "@/lib/utils";
6+
7+
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+
});
14+
15+
export default function Home() {
16+
const [clicked, setClicked] = useState(false);
17+
const { data, isLoading } = usePings({
18+
enabled: clicked,
19+
});
20+
21+
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>
39+
);
40+
}

‎client/src/pages/sponsor-guest.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Inter as FontSans } from "next/font/google";
2+
import { useState } from "react";
3+
4+
import { usePings } from "@/hooks/pings";
5+
import { cn } from "@/lib/utils";
6+
7+
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+
});
14+
15+
export default function Home() {
16+
const [clicked, setClicked] = useState(false);
17+
const { data, isLoading } = usePings({
18+
enabled: clicked,
19+
});
20+
21+
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>
39+
);
40+
}

0 commit comments

Comments
 (0)