Vendor Modals - Copy this React, Tailwind Component to your project

add-Vendor-Listing-Form-Modals-in-just-login-form-"import-React,-{-useState-}-from-"react";-import-{-FiSearch,-FiShoppingCart,-FiMenu,-FiX-}-from-"react-icons/fi";-import-{-FaFacebook,-FaTwitter,-FaInstagram-}-from-"react-icons/fa";-const-BiryaniMkt-=-()-=>-{-const-[isMenuOpen,-setIsMenuOpen]-=-useState(false);-const-[cartItems,-setCartItems]-=-useState(0);-const-[showCartModal,-setShowCartModal]-=-useState(false);-const-[showLoginModal,-setShowLoginModal]-=-useState(false);-const-[showAboutModal,-setShowAboutModal]-=-useState(false);-const-[showContactModal,-setShowContactModal]-=-useState(false);-const-[showTermsModal,-setShowTermsModal]-=-useState(false);-const-[showPrivacyModal,-setShowPrivacyModal]-=-useState(false);-const-handleAddToCart-=-()-=>-{-setCartItems(prev-=>-prev-+-1);-};-const-restaurants-=-[-{-id:-1,-name:-"Royal-Biryani-House",-rating:-4.5,-image:-"https://images.unsplash.com/photo-1563379091339-03b21ab4a4f8",-cuisine:-"Hyderabadi",-deliveryTime:-"30-40-mins"-},-{-id:-2,-name:-"Paradise-Biryani",-rating:-4.8,-image:-"https://images.unsplash.com/photo-1642821373181-696a54913e93",-cuisine:-"Lucknowi",-deliveryTime:-"25-35-mins"-},-{-id:-3,-name:-"Biryani-Blues",-rating:-4.3,-image:-"https://images.unsplash.com/photo-1589302168068-964664d93dc0",-cuisine:-"Kolkata",-deliveryTime:-"35-45-mins"-}-];-//-Modal-Components-const-CartModal-=-()-=>-(-<div-className="fixed-inset-0-bg-black-bg-opacity-50-z-50-flex-items-center-justify-center">-<div-className="bg-white-p-8-rounded-lg-max-w-md-w-full">-<div-className="flex-justify-between-items-center-mb-4">-<h2-className="text-2xl-font-bold">Your-Cart</h2>-<button-onClick={()-=>-setShowCartModal(false)}>-<FiX-className="h-6-w-6"-/>-</button>-</div>-{cartItems-===-0-?-(-<p>Your-cart-is-empty</p>-)-:-(-<div>-<p>You-have-{cartItems}-items-in-your-cart</p>-<button-className="mt-4-w-full-bg-orange-500-text-white-px-4-py-2-rounded-md-hover:bg-orange-600"-onClick={()-=>-setShowCartModal(false)}->-Proceed-to-Checkout-</button>-</div>-)}-</div>-</div>-);-const-LoginModal-=-()-=>-(-<div-className="fixed-inset-0-bg-black-bg-opacity-50-z-50-flex-items-center-justify-center">-<div-className="bg-white-p-8-rounded-lg-max-w-md-w-full">-<div-className="flex-justify-between-items-center-mb-4">-<h2-className="text-2xl-font-bold">Login/Signup</h2>-<button-onClick={()-=>-setShowLoginModal(false)}>-<FiX-className="h-6-w-6"-/>-</button>-</div>-<form-className="space-y-4">-<input-type="email"-placeholder="Email"-className="w-full-p-2-border-rounded"-/>-<input-type="password"-placeholder="Password"-className="w-full-p-2-border-rounded"-/>-<button-className="w-full-bg-orange-500-text-white-px-4-py-2-rounded-md-hover:bg-orange-600"-onClick={(e)-=>-{-e.preventDefault();-setShowLoginModal(false);-}}->-Login-</button>-</form>-</div>-</div>-);-const-InfoModal-=-({-title,-content,-onClose-})-=>-(-<div-className="fixed-inset-0-bg-black-bg-opacity-50-z-50-flex-items-center-justify-center">-<div-className="bg-white-p-8-rounded-lg-max-w-md-w-full">-<div-className="flex-justify-between-items-center-mb-4">-<h2-className="text-2xl-font-bold">{title}</h2>-<button-onClick={onClose}>-<FiX-className="h-6-w-6"-/>-</button>-</div>-<div-className="prose">{content}</div>-</div>-</div>-);-return-(-<div-className="min-h-screen-bg-gray-50">-{/*-Header-*/}-<header-className="fixed-w-full-bg-white-shadow-md-z-50">-<div-className="container-mx-auto-px-4-py-3">-<div-className="flex-items-center-justify-between">-<div-className="flex-items-center-space-x-4">-<button-onClick={()-=>-setIsMenuOpen(!isMenuOpen)}-className="md:hidden"->-{isMenuOpen-?-(-<FiX-className="h-6-w-6-text-gray-600"-/>-)-:-(-<FiMenu-className="h-6-w-6-text-gray-600"-/>-)}-</button>-<h1-className="text-2xl-font-bold-text-orange-600">BiryaniMkt.com</h1>-</div>-<div-className="hidden-md:flex-items-center-space-x-6">-<a-href="#"-className="text-gray-600-hover:text-orange-600">Home</a>-<a-href="#"-className="text-gray-600-hover:text-orange-600">Restaurants</a>-<button-onClick={()-=>-setShowAboutModal(true)}-className="text-gray-600-hover:text-orange-600"->-About-Us-</button>-<button-onClick={()-=>-setShowContactModal(true)}-className="text-gray-600-hover:text-orange-600"->-Contact-</button>-</div>-<div-className="flex-items-center-space-x-4">-<button-className="relative"-onClick={()-=>-setShowCartModal(true)}->-<FiShoppingCart-className="h-6-w-6-text-gray-600"-/>-<span-className="absolute--top-2--right-2-bg-orange-500-text-white-rounded-full-w-5-h-5-flex-items-center-justify-center-text-xs">-{cartItems}-</span>-</button>-<button-onClick={()-=>-setShowLoginModal(true)}-className="hidden-md:block-bg-orange-500-text-white-px-4-py-2-rounded-md-hover:bg-orange-600-transition-duration-300"->-Login/Signup-</button>-</div>-</div>-</div>-</header>-{/*-Modals-*/}-{showCartModal-&&-<CartModal-/>}-{showLoginModal-&&-<LoginModal-/>}-{showAboutModal-&&-(-<InfoModal-title="About-Us"-content="We-are-BiryaniMkt.com,-your-one-stop-destination-for-the-best-biryanis-in-town."-onClose={()-=>-setShowAboutModal(false)}-/>-)}-{showContactModal-&&-(-<InfoModal-title="Contact-Us"-content="Email:-support@biryanimkt.com\nPhone:-+1-(555)-123-4567"-onClose={()-=>-setShowContactModal(false)}-/>-)}-{showTermsModal-&&-(-<InfoModal-title="Terms-of-Service"-content="Our-terms-of-service-content-goes-here."-onClose={()-=>-setShowTermsModal(false)}-/>-)}-{showPrivacyModal-&&-(-<InfoModal-title="Privacy-Policy"-content="Our-privacy-policy-content-goes-here."-onClose={()-=>-setShowPrivacyModal(false)}-/>-)}-{/*-Rest-of-the-components-remain-the-same-*/}-{/*-Mobile-Menu-*/}-{isMenuOpen-&&-(-<div-className="fixed-inset-0-z-40-bg-white-pt-16-md:hidden">-<div-className="container-mx-auto-px-4-py-4-space-y-4">-<a-href="#"-className="block-text-gray-600-hover:text-orange-600-py-2">Home</a>-<a-href="#"-className="block-text-gray-600-hover:text-orange-600-py-2">Restaurants</a>-<button-onClick={()-=>-{-setShowAboutModal(true);-setIsMenuOpen(false);-}}-className="block-text-gray-600-hover:text-orange-600-py-2-w-full-text-left"->-About-Us-</button>-<button-onClick={()-=>-{-setShowContactModal(true);-setIsMenuOpen(false);-}}-className="block-text-gray-600-hover:text-orange-600-py-2-w-full-text-left"->-Contact-</button>-<button-onClick={()-=>-{-setShowLoginModal(true);-setIsMenuOpen(false);-}}-className="w-full-bg-orange-500-text-white-px-4-py-2-rounded-md-hover:bg-orange-600-transition-duration-300"->-Login/Signup-</button>-</div>-</div>-)}-{/*-Hero-Section-*/}-<section-className="pt-20-relative">-<div-className="h-[500px]-relative">-<img-src="https://images.unsplash.com/photo-1633945274405-b6c8069047b0"-alt="Biryani-Hero"-className="w-full-h-full-object-cover"-/>-<div-className="absolute-inset-0-bg-black-bg-opacity-50-flex-items-center-justify-center">-<div-className="text-center-text-white-px-4">-<h1-className="text-4xl-md:text-6xl-font-bold-mb-4">Discover-the-Best-Biryani</h1>-<p-className="text-xl-mb-8">Order-from-top-rated-restaurants-near-you</p>-<div-className="flex-flex-col-md:flex-row-items-center-justify-center-space-y-4-md:space-y-0-md:space-x-4">-<button-className="bg-orange-500-text-white-px-8-py-3-rounded-md-hover:bg-orange-600-transition-duration-300">-Explore-Restaurants-</button>-<button-onClick={handleAddToCart}-className="bg-white-text-orange-500-px-8-py-3-rounded-md-hover:bg-gray-100-transition-duration-300"->-Order-Now-</button>-</div>-</div>-</div>-</div>-</section>-{/*-Restaurant-Section-*/}-<section-className="container-mx-auto-px-4-py-16">-<h2-className="text-3xl-font-bold-text-gray-800-mb-8">Popular-Restaurants</h2>-<div-className="grid-grid-cols-1-md:grid-cols-2-lg:grid-cols-3-gap-8">-{restaurants.map((restaurant)-=>-(-<div-key={restaurant.id}-className="bg-white-rounded-lg-shadow-md-overflow-hidden-hover:shadow-lg-transition-duration-300">-<img-src={restaurant.image}-alt={restaurant.name}-className="w-full-h-48-object-cover"-/>-<div-className="p-4">-<h3-className="text-xl-font-semibold-text-gray-800">{restaurant.name}</h3>-<div-className="flex-items-center-mt-2">-<span-className="text-yellow-500">★</span>-<span-className="ml-1-text-gray-600">{restaurant.rating}</span>-<span-className="mx-2">•</span>-<span-className="text-gray-600">{restaurant.cuisine}</span>-</div>-<p-className="text-gray-500-mt-2">{restaurant.deliveryTime}</p>-<button-onClick={handleAddToCart}-className="mt-4-w-full-bg-orange-500-text-white-px-4-py-2-rounded-md-hover:bg-orange-600-transition-duration-300"->-Order-Now-</button>-</div>-</div>-))}-</div>-</section>-{/*-Footer-*/}-<footer-className="bg-gray-800-text-white-py-12">-<div-className="container-mx-auto-px-4">-<div-className="grid-grid-cols-1-md:grid-cols-4-gap-8">-<div>-<h3-className="text-xl-font-bold-mb-4">BiryaniMkt.com</h3>-<p-className="text-gray-400">Delivering-happiness,-one-biryani-at-a-time.</p>-</div>-<div>-<h4-className="text-lg-font-semibold-mb-4">Quick-Links</h4>-<ul-className="space-y-2">-<li>-<button-onClick={()-=>-setShowAboutModal(true)}-className="text-gray-400-hover:text-white"->-About-Us-</button>-</li>-<li>-<button-onClick={()-=>-setShowContactModal(true)}-className="text-gray-400-hover:text-white"->-Contact-</button>-</li>-<li>-<button-onClick={()-=>-setShowTermsModal(true)}-className="text-gray-400-hover:text-white"->-Terms-of-Service-</button>-</li>-<li>-<button-onClick={()-=>-setShowPrivacyModal(true)}-className="text-gray-400-hover:text-white"->-Privacy-Policy-</button>-</li>-</ul>-</div>-<div>-<h4-className="text-lg-font-semibold-mb-4">Contact-Us</h4>-<ul-className="space-y-2-text-gray-400">-<li>support@biryanimkt.com</li>-<li>+1-(555)-123-4567</li>-</ul>-</div>-<div>-<h4-className="text-lg-font-semibold-mb-4">Follow-Us</h4>-<div-className="flex-space-x-4">-<FaFacebook-className="h-6-w-6-text-gray-400-hover:text-white-cursor-pointer"-/>-<FaTwitter-className="h-6-w-6-text-gray-400-hover:text-white-cursor-pointer"-/>-<FaInstagram-className="h-6-w-6-text-gray-400-hover:text-white-cursor-pointer"-/>-</div>-</div>-</div>-<div-className="border-t-border-gray-700-mt-8-pt-8-text-center-text-gray-400">-<p>©-2024-BiryaniMkt.com.-All-rights-reserved.</p>-</div>-</div>-</footer>-</div>-);-};-export-default-BiryaniMkt;