Skip to content

Commit ffdc43e

Browse files
PPHcodePPHcode
authored
Merge pull request #14 from BlendRush/P_Dev
Logout button added
2 parents 2a664ff + 7331c2a commit ffdc43e

2 files changed

Lines changed: 109 additions & 67 deletions

File tree

‎src/Component/N-SearchBar.js‎

Lines changed: 70 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
// src/Component/NavBar.jsx
22
import React from "react";
3-
import { NavLink, Link } from "react-router-dom";
3+
import { NavLink, Link, useNavigate } from "react-router-dom";
44
import { useCart } from "../Component/CartContext";
55

66
export default function NavBar({ search = "", onSearchChange }) {
7-
const { count } = useCart(); // live total qty
7+
const { count } = useCart();
8+
const navigate = useNavigate();
89

9-
// shared styling for the center nav links
1010
const navLink = ({ isActive }) =>
1111
[
1212
"relative inline-flex items-center gap-2 px-3 py-1 rounded-lg",
@@ -16,11 +16,18 @@ export default function NavBar({ search = "", onSearchChange }) {
1616
: "text-slate-700 hover:text-slate-900",
1717
].join(" ");
1818

19+
const handleLogout = () => {
20+
try {
21+
localStorage.removeItem("auth:token"); // adjust if your auth key differs
22+
} catch {}
23+
navigate("/sign-in");
24+
};
25+
1926
return (
2027
<header className="fixed inset-x-0 top-0 z-50">
2128
<nav className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
2229
<div className="mt-4 flex items-center justify-between rounded-3xl border border-white/30 bg-white/40 px-5 py-3 backdrop-blur-md shadow-sm">
23-
{/* Logo -> go home */}
30+
{/* Logo -> Home */}
2431
<Link to="/home" className="flex items-center gap-2">
2532
<span className="inline-grid place-items-center h-9 w-9 rounded-xl bg-emerald-500 text-white font-black">
2633
bR
@@ -32,12 +39,11 @@ export default function NavBar({ search = "", onSearchChange }) {
3239
</div>
3340
</Link>
3441

35-
{/* Center links (Blog removed) */}
42+
{/* Center links */}
3643
<div className="hidden md:flex items-center gap-6">
3744
<NavLink to="/home" className={navLink}>
3845
<svg className="h-4 w-4 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
39-
<path d="M3 11.5 12 4l9 7.5" />
40-
<path d="M5 10v10h14V10" />
46+
<path d="M3 11.5 12 4l9 7.5" /><path d="M5 10v10h14V10" />
4147
</svg>
4248
<span>Home</span>
4349
</NavLink>
@@ -49,19 +55,42 @@ export default function NavBar({ search = "", onSearchChange }) {
4955
<span>Menu</span>
5056
</NavLink>
5157

52-
{/* If you don't have /about route yet, remove this or add the route */}
58+
{/* Orders after Menu */}
59+
<NavLink to="/orders" className={navLink}>
60+
<svg className="h-4 w-4 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
61+
<path d="M7 3h10a2 2 0 0 1 2 2v14l-4-2-4 2-4-2-4 2V5a2 2 0 0 1 2-2z" />
62+
</svg>
63+
<span>Orders</span>
64+
</NavLink>
65+
5366
<NavLink to="/about" className={navLink}>
5467
<svg className="h-4 w-4 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
55-
<circle cx="12" cy="12" r="9" />
56-
<path d="M12 8v8M12 16h.01" />
68+
<circle cx="12" cy="12" r="9" /><path d="M12 8v8M12 16h.01" />
5769
</svg>
5870
<span>About</span>
5971
</NavLink>
6072
</div>
6173

62-
{/* Search + Cart */}
74+
{/* Right cluster: Cart (left) + Search (middle) + Logout icon (right) */}
6375
<div className="flex items-center gap-3">
64-
{/* Search */}
76+
{/* Cart (left of search) */}
77+
<Link
78+
to="/cart"
79+
className="relative grid place-items-center rounded-xl border border-white/30 bg-white/60 p-2 hover:bg-white/80 transition"
80+
aria-label={`Cart${count ? `, ${count} item${count > 1 ? "s" : ""}` : ""}`}
81+
>
82+
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-emerald-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
83+
<path d="M6 6h15l-1.5 9h-12z" /><path d="M6 6l-1-3H2" />
84+
<circle cx="9" cy="20" r="1.6" /><circle cx="18" cy="20" r="1.6" />
85+
</svg>
86+
{count > 0 && (
87+
<span className="absolute -top-1.5 -right-1.5 grid h-5 min-w-[1.25rem] place-items-center rounded-full bg-emerald-600 px-1.5 text-[11px] font-bold text-white shadow ring-1 ring-white">
88+
{count}
89+
</span>
90+
)}
91+
</Link>
92+
93+
{/* Search (middle) */}
6594
<div className="hidden md:block w-[340px]">
6695
<div className="relative">
6796
<input
@@ -70,49 +99,32 @@ export default function NavBar({ search = "", onSearchChange }) {
7099
placeholder="Search smoothies, ingredients…"
71100
className="w-full rounded-xl border border-gray-300 bg-white pl-10 pr-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500"
72101
/>
73-
<svg
74-
xmlns="http://www.w3.org/2000/svg"
75-
viewBox="0 0 24 24"
102+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
76103
className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400"
77-
fill="none"
78-
stroke="currentColor"
79-
strokeWidth="2"
80-
>
104+
fill="none" stroke="currentColor" strokeWidth="2">
81105
<circle cx="11" cy="11" r="8" />
82106
<path d="m21 21-3.6-3.6" />
83107
</svg>
84108
</div>
85109
</div>
86110

87-
{/* Cart button */}
88-
<Link
89-
to="/cart"
90-
className="relative grid place-items-center rounded-xl border border-white/30 bg-white/60 p-2 hover:bg-white/80 transition"
91-
aria-label={`Cart${count ? `, ${count} item${count > 1 ? "s" : ""}` : ""}`}
111+
{/* Logout ICON ONLY (right of search) */}
112+
<button
113+
onClick={handleLogout}
114+
title="Logout"
115+
aria-label="Logout"
116+
className="hidden md:grid place-items-center rounded-xl bg-gray-900 text-white p-2 hover:bg-gray-800 active:scale-[0.99] transition"
92117
>
93-
<svg
94-
xmlns="http://www.w3.org/2000/svg"
95-
className="h-6 w-6 text-emerald-700"
96-
viewBox="0 0 24 24"
97-
fill="none"
98-
stroke="currentColor"
99-
strokeWidth="1.8"
100-
>
101-
<path d="M6 6h15l-1.5 9h-12z" />
102-
<path d="M6 6l-1-3H2" />
103-
<circle cx="9" cy="20" r="1.6" />
104-
<circle cx="18" cy="20" r="1.6" />
118+
<svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
119+
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
120+
<path d="M16 17l5-5-5-5" />
121+
<path d="M21 12H9" />
105122
</svg>
106-
{count > 0 && (
107-
<span className="absolute -top-1.5 -right-1.5 grid h-5 min-w-[1.25rem] place-items-center rounded-full bg-emerald-600 px-1.5 text-[11px] font-bold text-white shadow ring-1 ring-white">
108-
{count}
109-
</span>
110-
)}
111-
</Link>
123+
</button>
112124
</div>
113125
</div>
114126

115-
{/* Mobile search */}
127+
{/* Mobile search + icon-only logout below it */}
116128
<div className="md:hidden mt-3 px-1">
117129
<div className="relative">
118130
<input
@@ -121,18 +133,26 @@ export default function NavBar({ search = "", onSearchChange }) {
121133
placeholder="Search smoothies, ingredients…"
122134
className="w-full rounded-xl border border-gray-300 bg-white pl-10 pr-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500"
123135
/>
124-
<svg
125-
xmlns="http://www.w3.org/2000/svg"
126-
viewBox="0 0 24 24"
136+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
127137
className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400"
128-
fill="none"
129-
stroke="currentColor"
130-
strokeWidth="2"
131-
>
138+
fill="none" stroke="currentColor" strokeWidth="2">
132139
<circle cx="11" cy="11" r="8" />
133140
<path d="m21 21-3.6-3.6" />
134141
</svg>
135142
</div>
143+
144+
<button
145+
onClick={handleLogout}
146+
title="Logout"
147+
aria-label="Logout"
148+
className="mt-2 inline-grid place-items-center rounded-xl bg-gray-900 text-white p-2 hover:bg-gray-800 active:scale-[0.99] transition"
149+
>
150+
<svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
151+
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
152+
<path d="M16 17l5-5-5-5" />
153+
<path d="M21 12H9" />
154+
</svg>
155+
</button>
136156
</div>
137157
</nav>
138158
</header>

‎src/Pages/SignIn.jsx‎

Lines changed: 39 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,20 @@ export default function SignIn() {
2929
return Promise.resolve();
3030
};
3131

32-
// Change this to your backend auth route if needed
3332
const googleAuth = () => {
3433
window.open("http://localhost:8080/auth/google", "_self");
3534
};
3635

3736
return (
3837
<div
39-
className="relative min-h-screen bg-cover bg-center flex items-center justify-center"
38+
className="relative min-h-screen bg-cover bg-center flex flex-col items-center justify-center px-4"
4039
style={{ backgroundImage: `url(${signupBg})` }}
4140
>
4241
{/* CARD */}
4342
<div
4443
className="
45-
bg-white/0 rounded-2xl -mt-18 shadow-xl ring-1 ring-black/5 backdrop-blur
46-
p-6 sm:p-8 w-[600px] max-w-[90vw] -mt-44 h-[auto]
44+
bg-white/0 rounded-2xl shadow-xl ring-1 ring-black/5 backdrop-blur
45+
p-6 sm:p-8 w-[600px] max-w-[90vw] -mt-24
4746
"
4847
>
4948
<div className="flex flex-col -mt-6 items-center w-full -mb-8 gap-10">
@@ -111,7 +110,7 @@ export default function SignIn() {
111110
</Text>
112111
</div>
113112

114-
{/* Submit */}
113+
{/* Sign In */}
115114
<Form.Item className="mb-3">
116115
<div className="flex justify-center">
117116
<Button
@@ -131,20 +130,43 @@ export default function SignIn() {
131130
</Button>
132131
</div>
133132
</Form.Item>
133+
134+
{/* Divider */}
135+
<div className="flex items-center gap-3 my-3">
136+
<div className="h-px flex-1 bg-gray-200" />
137+
<span className="text-xs text-gray-500">or</span>
138+
<div className="h-px flex-1 bg-gray-200" />
139+
</div>
140+
141+
{/* Google Sign-In */}
142+
<div className="flex justify-center">
143+
<Button
144+
type="default"
145+
className="flex items-center gap-2 !px-5 !py-2 rounded-full"
146+
onClick={googleAuth}
147+
>
148+
<GoogleOutlined />
149+
Sign in with Google
150+
</Button>
151+
</div>
134152
</Form>
153+
</div>
135154

136-
137-
{/* Google Sign-In */}
138-
<div className="flex justify-center mb-2">
139-
<Button
140-
type="default"
141-
className="flex items-center gap-2 !px-5 !py-2 rounded-full"
142-
onClick={googleAuth}
143-
>
144-
<GoogleOutlined />
145-
Sign in with Google
146-
</Button>
147-
</div>
155+
{/* OUTSIDE the card: Sign Up CTA */}
156+
<div className="mt-4 -mb-4 w-full flex justify-center">
157+
<Button
158+
type="default"
159+
className="
160+
!w-full md:!w-[300px] !h-[45px]
161+
!rounded-full !font-bold
162+
!text-emerald-700 !border-emerald-300
163+
hover:!bg-emerald-50
164+
bg-white/70 backdrop-blur-sm
165+
"
166+
onClick={() => navigate("/register")}
167+
>
168+
Create an account
169+
</Button>
148170
</div>
149171
</div>
150172
);

0 commit comments

Comments
 (0)