From 4896c3af00d9ff152628cdfb7aaa8b4ac8587fca Mon Sep 17 00:00:00 2001 From: Ikki Date: Wed, 30 Oct 2024 18:45:04 +0530 Subject: [PATCH] navbar --- .../src/AgroShopAI/components/ShopNavbar.jsx | 220 ++++++++++++++++++ frontend/src/MainContent.jsx | 3 +- 2 files changed, 222 insertions(+), 1 deletion(-) create mode 100644 frontend/src/AgroShopAI/components/ShopNavbar.jsx diff --git a/frontend/src/AgroShopAI/components/ShopNavbar.jsx b/frontend/src/AgroShopAI/components/ShopNavbar.jsx new file mode 100644 index 00000000..4dd67fe5 --- /dev/null +++ b/frontend/src/AgroShopAI/components/ShopNavbar.jsx @@ -0,0 +1,220 @@ +import React, { useState, useEffect, useRef } from 'react'; +import { Link } from 'react-router-dom'; +import LOGO from "/favicon2.png"; + + +function ShopNavbar() { + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [location, setLocation] = useState("India"); // Default location + const [showAlert, setShowAlert] = useState(false); // State to control the alert dialog + const [cartCount, setCartCount] = useState(5); // Example cart count + const [manualLocation, setManualLocation] = useState(false) + const dropdownRef = useRef(null); + + useEffect(() => { + function handleClickOutside(event) { + if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { + setIsDropdownOpen(false); // Close dropdown if click is outside + } + } + + // Bind event listener + document.addEventListener("mousedown", handleClickOutside); + return () => { + // Cleanup the event listener on component unmount + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [dropdownRef]); + // Function to handle location update + const updateLocation = () => { + setShowAlert(true); // Show the custom alert dialog + }; + + // Function to handle alert confirmation + const handleConfirm = (userLocation) => { + if (userLocation) { + setLocation(userLocation); // Update the location state with input value + setManualLocation(true) + } + setShowAlert(false); // Hide the alert dialog + }; + + // Function to handle alert cancellation + const handleCancel = () => { + setShowAlert(false); // Hide the alert dialog + }; + + const toggleDropdown = () => { + setIsDropdownOpen(!isDropdownOpen); + }; + + return ( + + ); +} + + + + + + +const CustomAlertDialog = ({ message, onConfirm, onCancel }) => { + const [inputValue, setInputValue] = useState(''); + + const handleConfirm = () => { + onConfirm(inputValue); // Pass the input value to the confirm function + }; + + return ( +
+
+ {/* Cross icon to close the dialog */} + + + +

{message}

{/* Ensure message is rendered here */} + +
+ setInputValue(e.target.value)} + className="flex-grow p-2 border rounded-md mr-2 text-black" + /> + +
+ +
+
+ ); +}; + + + + +export default ShopNavbar; diff --git a/frontend/src/MainContent.jsx b/frontend/src/MainContent.jsx index e2440131..9c828799 100644 --- a/frontend/src/MainContent.jsx +++ b/frontend/src/MainContent.jsx @@ -54,6 +54,7 @@ import BestPractices from './pages/BestPractices'; import Profile from './components/Profile'; import AgriProductListing from './AgroRentAI/components/AgriProductListing'; import CartPage from './AgroShopAI/pages/Cart'; +import ShopNavbar from './AgroShopAI/components/ShopNavbar'; const MainContent = () => { UseScrollToTop(); const location = useLocation(); // Get the current route @@ -83,7 +84,7 @@ const MainContent = () => {
- {!hideNavbar && } {/* Conditional rendering for Navbar */} + {!hideNavbar ? : } {/* Conditional rendering for Navbar */} } /> {/* Thank You Page Route */} } />