Skip to content

Feature/minor UI changes #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Feature/minor UI changes #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
68745f0
Minor fixes
ashk6645 Sep 25, 2025
486cfb7
Minor UI changes
ashk6645 Sep 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added components/ErrorBoundary.jsx
View file
Open in desktop
Empty file.
129 changes: 75 additions & 54 deletions components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,68 +2,89 @@
import { Search, ShoppingCart } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useState, useCallback } from "react";
import { useSelector } from "react-redux";

const Navbar = () => {
const router = useRouter();
const [search, setSearch] = useState("");
const cartCount = useSelector((state) => state.cart.total);

const router = useRouter();
const handleSearch = useCallback(
(e) => {
e.preventDefault();
if (search.trim()) {
router.push(`/shop?search=${encodeURIComponent(search.trim())}`);
}
},
[router, search]
);

const [search, setSearch] = useState('')
const cartCount = useSelector(state => state.cart.total)
return (
<nav className="relative bg-white">
<div className="mx-6">
<div className="flex items-center justify-between max-w-7xl mx-auto py-4 transition-all">
<Link
href="/"
className="relative text-4xl font-semibold text-slate-700"
>
<span className="text-green-600">go</span>
cart
<span className="text-green-600 text-5xl leading-0">.</span>
<p className="absolute -top-1 -right-8 px-3 p-0.5 text-xs font-semibold rounded-full flex items-center gap-2 text-white bg-green-500">
plus
</p>
</Link>

const handleSearch = (e) => {
e.preventDefault()
router.push(`/shop?search=${search}`)
}
{/* Desktop Menu */}
<div className="hidden sm:flex items-center gap-4 lg:gap-8 text-slate-600">
<Link href="/">Home</Link>
<Link href="/shop">Shop</Link>
<Link href="/">About</Link>
<Link href="/">Contact</Link>

return (
<nav className="relative bg-white">
<div className="mx-6">
<div className="flex items-center justify-between max-w-7xl mx-auto py-4 transition-all">
<form
onSubmit={handleSearch}
className="hidden xl:flex items-center w-xs text-sm gap-2 bg-slate-100 px-4 py-3 rounded-full"
>
<Search size={18} className="text-slate-600" />
<input
type="text"
className="w-full bg-transparent outline-none placeholder-slate-600"
placeholder="Search products"
value={search}
onChange={(e) => setSearch(e.target.value)}
required
/>
</form>

<Link href="/" className="relative text-4xl font-semibold text-slate-700">
<span className="text-green-600">go</span>cart<span className="text-green-600 text-5xl leading-0">.</span>
<p className="absolute text-xs font-semibold -top-1 -right-8 px-3 p-0.5 rounded-full flex items-center gap-2 text-white bg-green-500">
plus
</p>
</Link>
<Link
href="/cart"
className="relative flex items-center gap-2 text-slate-600"
>
<ShoppingCart size={18} />
Cart
<span className="absolute -top-1 left-3 flex items-center justify-center text-[8px] text-white bg-slate-600 size-3.5 rounded-full">
{cartCount}
</span>
</Link>

{/* Desktop Menu */}
<div className="hidden sm:flex items-center gap-4 lg:gap-8 text-slate-600">
<Link href="/">Home</Link>
<Link href="/shop">Shop</Link>
<Link href="/">About</Link>
<Link href="/">Contact</Link>
<button className="px-8 py-2 bg-indigo-500 hover:bg-indigo-600 transition text-white rounded-full">
Login
</button>
</div>

<form onSubmit={handleSearch} className="hidden xl:flex items-center w-xs text-sm gap-2 bg-slate-100 px-4 py-3 rounded-full">
<Search size={18} className="text-slate-600" />
<input className="w-full bg-transparent outline-none placeholder-slate-600" type="text" placeholder="Search products" value={search} onChange={(e) => setSearch(e.target.value)} required />
</form>
{/* Mobile User Button */}
<div className="sm:hidden">
<button className="px-7 py-1.5 bg-indigo-500 hover:bg-indigo-600 text-sm transition text-white rounded-full">
Login
</button>
</div>
</div>
</div>
<hr className="border-gray-300" />
</nav>
);
};

<Link href="/cart" className="relative flex items-center gap-2 text-slate-600">
<ShoppingCart size={18} />
Cart
<button className="absolute -top-1 left-3 text-[8px] text-white bg-slate-600 size-3.5 rounded-full">{cartCount}</button>
</Link>

<button className="px-8 py-2 bg-indigo-500 hover:bg-indigo-600 transition text-white rounded-full">
Login
</button>

</div>

{/* Mobile User Button */}
<div className="sm:hidden">
<button className="px-7 py-1.5 bg-indigo-500 hover:bg-indigo-600 text-sm transition text-white rounded-full">
Login
</button>
</div>
</div>
</div>
<hr className="border-gray-300" />
</nav>
)
}

export default Navbar
export default Navbar;
Empty file added components/ProductCardSkeleton.jsx
View file
Open in desktop
Empty file.
Empty file added components/ui/Button.jsx
View file
Open in desktop
Empty file.
Empty file added components/ui/Input.jsx
View file
Open in desktop
Empty file.
Empty file added hooks/useCart.js
View file
Open in desktop
Empty file.
Empty file added hooks/useIntersectionObserver.js
View file
Open in desktop
Empty file.
Empty file added lib/utils.js
View file
Open in desktop
Empty file.