From 624393f72bc18292f32b408b7597887a59c2d2c4 Mon Sep 17 00:00:00 2001 From: Papali Priya Ratan Sahu Date: Mon, 7 Oct 2024 00:00:13 +0530 Subject: [PATCH 1/5] 1) Correct the code od App.jsx 2) Edited nav bar and added some effect 3)Edited the signinand signup page 4) Added search option more chnages will be done ..............>>>>>. --- src/App.jsx | 60 ++---- src/components/Navbar.jsx | 149 ++++++++++++-- src/components/assets/search.png | Bin 0 -> 5534 bytes src/pages/LoginSignup.jsx | 340 +++++++++++++++++++++++-------- 4 files changed, 401 insertions(+), 148 deletions(-) create mode 100644 src/components/assets/search.png diff --git a/src/App.jsx b/src/App.jsx index b570633..bb0ebbc 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,64 +8,32 @@ 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 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"; - - function App() { return (
- {/* Add padding to avoid content hiding under the fixed navbar */} - - - - }> - }> - }> - }> - }> - }> - - } > - }> - }> - -
- - - + - } /> - } - /> - } - /> - } - /> - }> - } /> + }> + }> + }> + }> + }> + }> - } /> - } /> + } > + }> + }> -
- +
); } -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 68cb929..b16ee29 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,15 +1,37 @@ -import React, { useContext, useRef, useState } from "react"; +import React, { useContext, useEffect, useRef, useState } 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"; 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); @@ -19,8 +41,29 @@ 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

@@ -51,7 +94,15 @@ const Navbar = () => { closeMenu(); }} > - Shop + + + Shop + + {menu === "shop" && (

)} @@ -62,7 +113,15 @@ const Navbar = () => { closeMenu(); }} > - Men + + + Men + + {menu === "men" && (
)} @@ -73,7 +132,15 @@ const Navbar = () => { closeMenu(); }} > - Kids + + + Kids + + {menu === "kids" && (
)} @@ -84,14 +151,25 @@ const Navbar = () => { closeMenu(); }} > - Women + + + Women + + {menu === "women" && (
)}
  • - @@ -101,11 +179,44 @@ 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 */}
    @@ -113,7 +224,9 @@ const Navbar = () => { @@ -121,7 +234,9 @@ const Navbar = () => { @@ -129,14 +244,22 @@ const Navbar = () => {
    + - diff --git a/src/components/assets/search.png b/src/components/assets/search.png new file mode 100644 index 0000000000000000000000000000000000000000..b566580e4acbc70ffe0705fe0c453dd46d9b79bf GIT binary patch literal 5534 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 literal 0 HcmV?d00001 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

    -
    - -
  • { @@ -117,16 +112,13 @@ const Navbar = () => { > Men - {menu === "men" && ( -
    - )}
  • { @@ -136,16 +128,13 @@ const Navbar = () => { > Kids - {menu === "kids" && ( -
    - )}
  • { @@ -155,16 +144,13 @@ const Navbar = () => { > Women - {menu === "women" && ( -
    - )}
  • @@ -214,7 +200,11 @@ const Navbar = () => { @@ -222,7 +212,11 @@ const Navbar = () => { @@ -230,7 +224,11 @@ const Navbar = () => { @@ -238,7 +236,11 @@ const Navbar = () => {