diff --git a/package-lock.json b/package-lock.json index 9d99ea4..d39cc03 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17472,6 +17472,19 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/src/App.jsx b/src/App.jsx index 5f988f0..8b5bad7 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,25 +8,16 @@ import LoginSignup from "./pages/LoginSignup"; import Cart from "./pages/Cart"; import Footer from "./components/Footer"; import men_banner from "./components/assets/banner_mens.png"; - import women from "./components/assets/banner_women.png"; import kids from "./components/assets/banner_kids.png"; import AboutPage from "./pages/AboutPage"; - -import women from './components/assets/banner_women.png' -import kids from './components/assets/banner_kids.png' -import AboutPage from "./pages/AboutPage"; - - - - function App() { return (
{/* Add padding to avoid content hiding under the fixed navbar */} - + {/* Assuming Navbar is the component for the navigation bar */} } /> } /> - }> - } /> - + } /> } /> } /> } /> @@ -54,4 +43,4 @@ function App() { ); } -export default App; +export default App; \ No newline at end of file diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index a19ae01..57d0c12 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,17 +1,39 @@ -import React, { useContext, useRef, useState } from "react"; -import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; +import React, { useContext, useRef, useState, useEffect } from "react"; import logo from "./assets/logo.png"; import cart from "./assets/cart_icon.png"; -import { Link } from "react-router-dom"; +import search from "./assets/search.png"; +import { Link, useNavigate } from "react-router-dom"; import { ShopContext } from "../context/ShopContext"; import ham from "./assets/ham.png"; import DarkModeToggle from "../pages/DarkModeToggle"; +import ShoppingCartIcon from "@mui/icons-material/ShoppingCart"; // Importing the icon const Navbar = () => { + const navigate = useNavigate(); const [menu, setMenu] = useState("shop"); const [isMenuOpen, setIsMenuOpen] = useState(false); const { getTotalCartItems } = useContext(ShopContext); const menuRef = useRef(); + const [isLoginOpen, setIsLoginOpen] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); + const [isSearchOpen, setIsSearchOpen] = useState(false); + + // State to track if the page has been scrolled + const [isScrolled, setIsScrolled] = useState(false); + + // Detect scroll and toggle `isScrolled` state + useEffect(() => { + const handleScroll = () => { + if (window.scrollY > 50) { + setIsScrolled(true); + } else { + setIsScrolled(false); + } + }; + + window.addEventListener("scroll", handleScroll); + return () => window.removeEventListener("scroll", handleScroll); + }, []); const toggleMenu = () => { setIsMenuOpen((prev) => !prev); @@ -21,13 +43,32 @@ const Navbar = () => { setIsMenuOpen(false); }; + const handleLoginClick = () => { + setIsLoginOpen(true); + setTimeout(() => { + setIsLoginOpen(false); + navigate(0); // This will refresh the page + }, 500); + }; + + const handleSearch = () => { + setIsSearchOpen((prev) => !prev); + }; + + const handleSearchSubmit = (e) => { + e.preventDefault(); + navigate(`/search?q=${searchTerm}`); + }; + return ( -
+
Logo -

- Shopper's Stop -

+

Shopper's Stop

{ closeMenu(); }} > - Shop - {menu === "shop" && ( -
- )} + + + Shop + +
  • { @@ -64,10 +110,15 @@ const Navbar = () => { closeMenu(); }} > - Men - {menu === "men" && ( -
    - )} + + + Men + +
  • { @@ -75,10 +126,15 @@ const Navbar = () => { closeMenu(); }} > - Kids - {menu === "kids" && ( -
    - )} + + + Kids + +
  • { @@ -86,14 +142,19 @@ const Navbar = () => { closeMenu(); }} > - Women - {menu === "women" && ( -
    - )} + + + Women + +
  • - @@ -103,12 +164,47 @@ const Navbar = () => { )}
    + {/* Search Input */} +
    + Search + {isSearchOpen && ( +
    + setSearchTerm(e.target.value)} + className="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + /> + +
    + )} +
    + + {/* Menu items */}
    - + @@ -116,7 +212,11 @@ const Navbar = () => { @@ -124,7 +224,11 @@ const Navbar = () => { @@ -132,19 +236,24 @@ const Navbar = () => {
    + - - +
    {getTotalCartItems()} diff --git a/src/components/assets/search.png b/src/components/assets/search.png new file mode 100644 index 0000000..b566580 Binary files /dev/null and b/src/components/assets/search.png differ diff --git a/src/pages/LoginSignup.jsx b/src/pages/LoginSignup.jsx index 17131da..68f0fbe 100644 --- a/src/pages/LoginSignup.jsx +++ b/src/pages/LoginSignup.jsx @@ -1,45 +1,76 @@ -import { useState } from "react" +import { useState } from "react"; import loginimg from '../components/assets/loginimg.png' import logo from '../components/assets/logo.png' import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai" -// import { useDispatch } from "react-redux" -import { Link } from "react-router-dom" +import { Link, useNavigate } from "react-router-dom"; import fb from "../components/assets/facebook.png" import google from "../components/assets/google.png" import github from "../components/assets/github.png" import twitter from "../components/assets/twitter.png" const LoginSignup = () => { + const navigate = useNavigate(); + const [showPassword, setShowPassword] = useState(false); + const [rememberMe, setRememberMe] = useState(false); + const [isSignup, setIsSignup] = useState(false); + const [formData, setFormData] = useState({ + name: "", + email: "", + phone: "", + password: "", + confirmPassword: "", + otp: "", + otpPhone: "", + otpEmail: "", + }); - // const navigate = useNavigate() - // const dispatch = useDispatch() - // const [formData, setFormData] = useState({ - // email: "", - // password: "", - // }) - - const [showPassword, setShowPassword] = useState(false) - - // const { email, password } = formData - - // const handleOnChange = (e) => { - // setFormData((prevData) => ({ - // ...prevData, - // [e.target.name]: e.target.value, - // })) - // } - - // const handleOnSubmit = (e) => { - // e.preventDefault() - // dispatch(login(email, password, navigate)) - // } - - const [rememberMe, setRememberMe] = useState(false); + const handleOnChange = (e) => { + setFormData((prevData) => ({ + ...prevData, + [e.target.name]: e.target.value, + })); + }; const handleCheckboxChange = () => { setRememberMe(!rememberMe); }; - + + const handleShowPassword = () => { + setShowPassword((prev) => !prev); + }; + + const handleGetOtp = (type) => { + if (type === "phone") { + if (formData.phone.length === 10) { + setFormData((prevData) => ({ + ...prevData, + otpPhone: "1234", // Replace with actual OTP from API + })); + } else { + alert("Please enter a valid phone number"); + } + } else if (type === "email") { + if (formData.email.includes("@")) { + setFormData((prevData) => ({ + ...prevData, + otpEmail: "1234", // Replace with actual OTP from API + })); + } else { + alert("Please enter a valid email address"); + } + } + }; + + const handleSignup = (e) => { + e.preventDefault(); + if (formData.password !== formData.confirmPassword) { + alert("Passwords do not match"); + return; + } + // Call API to create new user + // For now, just redirect to app.jsx + navigate("/app"); + }; return (
    @@ -62,71 +93,202 @@ const LoginSignup = () => {

    Please sign-in to your account and start
    the bagging

    -
    - -