Skip to content

Commit fdefc78

Browse files
cxdy05cxdy05
committed
Add navbar and style user profile page to match Figma
1 parent c1c4ddb commit fdefc78

5 files changed

Lines changed: 155 additions & 24 deletions

File tree

client/src/components/ui/button_go_user_page.tsx renamed to client/src/components/ui/button_go_user_profile_page.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import Link from "next/link";
22

3-
export default function ButtonGoUserPage() {
3+
export default function ButtonGoUserProfilePage() {
44
return (
5-
<Link href="/user_page">
5+
<Link href="/user_profile_page">
66
<button
77
style={{
88
padding: "10px 20px",
@@ -14,7 +14,7 @@ export default function ButtonGoUserPage() {
1414
fontSize: "1.1em",
1515
}}
1616
>
17-
Go to User Page
17+
Go to User Profile Page
1818
</button>
1919
</Link>
2020
);

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import Link from "next/link";
2+
3+
export default function User_Navbar() {
4+
return (
5+
<nav
6+
style={{
7+
height: "64px",
8+
backgroundColor: "#ffffff",
9+
display: "flex",
10+
alignItems: "center",
11+
padding: "0 24px",
12+
borderBottom: "1px solid #e5e5e5",
13+
}}
14+
>
15+
{/* Logo */}
16+
<div style={{ fontWeight: "bold", marginRight: "24px" }}>Logo</div>
17+
18+
{/* Search bar */}
19+
<input
20+
type="text"
21+
placeholder="Search"
22+
style={{
23+
padding: "8px 12px",
24+
borderRadius: "8px",
25+
border: "1px solid #ccc",
26+
width: "240px",
27+
marginRight: "32px",
28+
}}
29+
/>
30+
31+
{/* Nav links */}
32+
<div style={{ display: "flex", gap: "24px" }}>
33+
<Link href="/">Home</Link>
34+
<Link href="#">My Clubs</Link>
35+
<Link href="#">My Borrowings</Link>
36+
<Link href="#">Friends</Link>
37+
</div>
38+
39+
{/* Spacer */}
40+
<div style={{ flex: 1 }} />
41+
42+
{/* User avatar */}
43+
<div
44+
style={{
45+
width: "36px",
46+
height: "36px",
47+
borderRadius: "50%",
48+
backgroundColor: "#5b84b1",
49+
color: "white",
50+
display: "flex",
51+
alignItems: "center",
52+
justifyContent: "center",
53+
fontWeight: "bold",
54+
}}
55+
>
56+
U
57+
</div>
58+
</nav>
59+
);
60+
}

‎client/src/pages/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
// this is the path to this page
22
// src/pages/index.tsx
33

4-
import ButtonGoUserDashboard from "../components/ui/button_go_user_dashboard";
54
import ButtonGoOrganizationDashboard from "../components/ui/button_go_organization_dashboard";
6-
import ButtonGoUserPage from "../components/ui/button_go_user_page";
5+
import ButtonGoUserDashboard from "../components/ui/button_go_user_dashboard";
6+
import ButtonGoUserProfilePage from "../components/ui/button_go_user_profile_page";
77

88
// this is a react functional component
99
// it returns a html element that will render the jsx inside it
@@ -29,7 +29,7 @@ const LandingPage = () => {
2929

3030
<ButtonGoOrganizationDashboard />
3131
<ButtonGoUserDashboard />
32-
<ButtonGoUserPage />
32+
<ButtonGoUserProfilePage />
3333
</div>
3434
);
3535
};

‎client/src/pages/user_page.tsx‎

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

‎client/src/pages/user_profile_page.tsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import Head from "next/head";
2+
3+
import User_Navbar from "../components/ui/user_navbar";
4+
5+
export default function UserPage() {
6+
return (
7+
<>
8+
<Head>
9+
<title>User Profile Page</title>
10+
</Head>
11+
12+
{/* Navbar refactor */}
13+
<User_Navbar />
14+
15+
<div
16+
style={{
17+
backgroundColor: "#e6e6e6",
18+
minHeight: "100vh",
19+
paddingTop: "64px",
20+
display: "flex",
21+
justifyContent: "center",
22+
}}
23+
>
24+
{/* Profile card */}
25+
<div
26+
style={{
27+
backgroundColor: "#ffffff",
28+
width: "900px",
29+
height: "500px",
30+
borderRadius: "8px",
31+
padding: "48px",
32+
textAlign: "center",
33+
marginTop: "40px",
34+
boxShadow: "0 2px 6px rgba(0,0,0,0.08)",
35+
}}
36+
>
37+
{/* Avatar */}
38+
<div
39+
style={{
40+
width: "120px",
41+
height: "120px",
42+
borderRadius: "50%",
43+
backgroundColor: "#5b84b1",
44+
color: "white",
45+
display: "flex",
46+
alignItems: "center",
47+
justifyContent: "center",
48+
fontSize: "48px",
49+
margin: "-100px auto 16px",
50+
}}
51+
>
52+
U
53+
</div>
54+
55+
{/* User details */}
56+
<h2 style={{ marginTop: "25px", fontSize: "28px" }}>
57+
New User 12345678
58+
</h2>
59+
<p style={{ color: "#666", marginBottom: "40px", fontSize: "18px" }}>
60+
Perth, Western Australia
61+
</p>
62+
63+
{/* Stats */}
64+
<div
65+
style={{
66+
display: "flex",
67+
justifyContent: "space-between",
68+
padding: "40px 40px",
69+
}}
70+
>
71+
<Stat label="Borrowed" value={0} />
72+
<Stat label="Friends" value={0} />
73+
<Stat label="Mutual friends" value={0} />
74+
<Stat label="Clubs joined" value={0} />
75+
</div>
76+
</div>
77+
</div>
78+
</>
79+
);
80+
}
81+
82+
function Stat({ label, value }: { label: string; value: number }) {
83+
return (
84+
<div>
85+
<div style={{ fontSize: "45px", marginBottom: "8px" }}>{value}</div>
86+
<div style={{ color: "#666", fontSize: "18px" }}>{label}</div>
87+
</div>
88+
);
89+
}

0 commit comments

Comments
 (0)