Clever-Shivanshu/Layout.js

## Layout.js
import Image from "next/image";
import { useSession, signIn, signOut } from "next-auth/react";
import { useState } from "react";
import { useRouter } from "next/router";
import Nav from "@/components/Navbar";
import { Dialog } from "@headlessui/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
import {ChatBubbleLeftRightIcon} from "@heroicons/react/24/outline";
import Head from "next/head";
import Link from "next/link";
import { CurrencyRupeeIcon } from "@heroicons/react/24/outline";
import { ShoppingBagIcon } from "@heroicons/react/24/outline";
import { UserGroupIcon } from "@heroicons/react/24/outline";
import React, { useEffect } from 'react';
import { LockClosedIcon } from "@heroicons/react/24/outline";
import { FireIcon } from "@heroicons/react/24/outline";

const navigation = [
  { name: "", href: "#" },
  { name: "", href: "#" },
  { name: "", href: "#" },
];

const features = [
  {
    name: "Easy Goods Purchase",
    description:
      "Effortlessly browse and buy a wide variety of agricultural products, all tailored to urban gardening needs. Our user-friendly platform ensures a seamless shopping experience, so you can get back to tending your green oasis.",
    icon: ShoppingBagIcon, // Use a string identifier or a name for the icon
  },
  {
    name: "Sell and Earn",
    description:
      "Become a seller on PrakritiBazaar and share your expertise with the community. List your seeds, vegetables, fruit, and more, and contribute to the urban agriculture movement while earning from your efforts.",
    icon: CurrencyRupeeIcon, // Use a string identifier or a name for the icon
  },
  {
    name: "Fast-Speed, Seamless Experience",
    description:
      "Enjoy lightning-fast loading times and a seamless browsing experience on PrakritiBazaar. Our platform is optimized for speed, ensuring that you can find what you need quickly and efficiently.",
    icon:  FireIcon, // Use a string identifier or a name for the icon
  },
  {
    name: "Passwordless, Easy, and Highly Secure Login",
    description:
      "Experience a seamless and secure entry into PrakritiBazaar with our passwordless login system. Say goodbye to the hassle of remembering complex passwords. Our innovative login process ensures a smooth, convenient, and highly secure access to your account.",
    icon: LockClosedIcon, // Use a string identifier or a name for the icon
  },
];

const people = [
  {
    name: "Shivanshu",
    role: "Full-Stack Web Developer",
    imageUrl: "/shivanshu.jpeg",
  },
  {
    name: "Archit",
    role: "Video Editor and Graphic Designer",
    imageUrl: "/archit.jpeg",
  },
];

const links = [
  { name: "Instagram", href: "https://www.instagram.com/gamernetworx/" },
  { name: "Contact Support", href: "mailto:gamernetworx@gmail.com" },
];
const stats = [
  { name: "Offices worldwide", value: "12" },
  { name: "Full-time colleagues", value: "300+" },
  { name: "Hours per week", value: "40" },
  { name: "Paid time off", value: "Unlimited" },
];

export default function Layout({ children }) {
  const [showNav, setShowNav] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const router = useRouter();
  const { data: session } = useSession();

  useEffect(() => {
  var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
  (function(){
    var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
    s1.async=true;
    s1.src='https://embed.tawk.to/6534edc3a84dd54dc483c70f/1hdbc1h6l';
    s1.charset='UTF-8';
    s1.setAttribute('crossorigin','*');
    s0.parentNode.insertBefore(s1,s0);
  })();
}, []);


  async function logout() {
    await router.push("/");
    await signOut();
  }

  if (!session) {
  return (
      <div className="bg-white">
        <Head>
          <title>Prakriti Bazaar</title>
        </Head>

        <header className="absolute inset-x-0 top-0 z-50">
          <nav
            className="flex items-center justify-between p-6 lg:px-8"
            aria-label="Global"
          >
            <div className="flex lg:flex-1">
              <Link href="#" className="-m-1.5 p-1.5">
                <span className="sr-only">Prakriti Bazaar</span>
                <Image
                  className="h-10 w-auto"
                  src="/logo.png"
                  alt=""
                  width={1000}
                  height={1000}
                />
              </Link>
            </div>
            <div className="flex lg:hidden">
              <button
                type="button"
                className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
                onClick={() => setMobileMenuOpen(true)}
              >
                <span className="sr-only">Open main menu</span>
                <Bars3Icon className="h-6 w-6" aria-hidden="true" />
              </button>
            </div>
            <div className="hidden lg:flex lg:gap-x-12">
              {navigation.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className="text-sm font-semibold leading-6 text-gray-900"
                >
                  {item.name}
                </Link>
              ))}
            </div>
            <div className="hidden lg:flex lg:flex-1 lg:justify-end">
              <Link
                href="/api/auth/signin"
                className="text-sm font-semibold leading-6 text-gray-900"
              >
                Log in <span aria-hidden="true">&rarr;</span>
              </Link>
            </div>
          </nav>
          <Dialog
            as="div"
            className="lg:hidden"
            open={mobileMenuOpen}
            onClose={setMobileMenuOpen}
          >
            <div className="fixed inset-0 z-50" />
            <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
             <div className="flex lg:flex-1">
<Link href="/" className="-m-1.5 p-1.5">
    <span className="sr-only">Prakriti Bazaar</span>
    <Image
      className="h-10 w-auto"
      src="/logo.png"
      alt=""
      width={1000}
      height={1000}
    />
  </Link>


                <button
                  type="button"
                  className="-m-2.5 rounded-md p-2.5 text-gray-700"
                  onClick={() => setMobileMenuOpen(false)}
                >
                  <span className="sr-only">Close menu</span>
                  <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                </button>
              </div>
              <div className="mt-6 flow-root">
                <div className="-my-6 divide-y divide-gray-500/10">
                  <div className="space-y-2 py-6">
                    {navigation.map((item) => (
                      <Link
                        key={item.name}
                        href={item.href}
                        className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
                      >
                        {item.name}
                      </Link>
                    ))}
                  </div>
                  <div className="py-6">
                    <Link
                      href="/api/auth/signin"
                      className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
                    >
                      Log in
                    </Link>
                  </div>
                </div>
              </div>
            </Dialog.Panel>
          </Dialog>
        </header>

        <div className="relative isolate px-6 pt-14 lg:px-8">
          <div
            className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
            aria-hidden="true"
          >
            <div
              className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#80ff95] to-[#89fc92] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
              style={{
                clipPath:
                  "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
              }}
            />
          </div>
          <div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
            <div className="hidden sm:mb-8 sm:flex sm:justify-center">
              <div className="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
                Cultivating Harmony 💚️
              </div>
            </div>
            <div className="text-center">
              <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
                Welcome to Prakriti Bazaar!!
              </h1>
              <p className="mt-6 text-lg leading-8 text-gray-600">
                From Fields to Festivities
              </p>
              <div className="mt-10 flex items-center justify-center gap-x-6">
                <Link
                  href="/api/auth/signin"
                  className="rounded-md bg-green-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
                >
                  Get started
                </Link>
              </div>
            </div>
          </div>
          <div
            className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
            aria-hidden="true"
          >
            <div
              className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#80ff95] to-[#89fc92] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
              style={{
                clipPath:
                  "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
              }}
            />
          </div>
        </div>

        <div className="bg-white py-24 sm:py-32">
          <div className="mx-auto max-w-7xl px-6 lg:px-8">
            <div className="mx-auto max-w-2xl lg:text-center">
              <h2 className="text-base font-semibold leading-7 text-green-600">
                Discover the Exciting Features of
              </h2>
              <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
                Your Urban Agriculture Hub
              </p>
              <p className="mt-6 text-lg leading-8 text-gray-600">
                PrakritiBazaar is a vibrant online marketplace dedicated to urban agriculture and sustainable living. We believe in bringing the bounty of nature closer to urban dwellers, fostering a deeper connection with the environment. Whether you are a seasoned gardener or just starting out, PrakritiBazaar provides a platform to explore, buy, and sell a wide array of agricultural products right from the heart of the city.
              </p>
            </div>
            <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
              <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
                {features.map((feature) => (
                  <div key={feature.name} className="relative pl-16">
                    <dt className="text-base font-semibold leading-7 text-gray-900">
                      <div className="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-green-600">
                        <feature.icon
                          className="h-6 w-6 text-white"
                          aria-hidden="true"
                        />
                      </div>
                      {feature.name}
                    </dt>
                    <dd className="mt-2 text-base leading-7 text-gray-600">
                      {feature.description}
                    </dd>
                  </div>
                ))}
              </dl>
            </div>
          </div>
        </div>
        <div className="bg-white py-24 sm:py-32">
          <div className="mx-auto grid max-w-7xl gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
            <div className="max-w-2xl">
              <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
                Meet our dynamic leaders at PrakritiBazaar
              </h2>
              <p className="mt-6 text-lg leading-8 text-gray-600">
               where Shivanshu, our skilled Full-Stack Web Developer, has brought our website to life with seamless functionality and beautiful design, while Archit, our talented Video Editor and Graphic Designer, has shaped our visual identity through a distinctive logo and informative tutorials. Together, they spearhead our mission to empower urban gardeners and enthusiasts in creating a greener, more sustainable urban lifestyle.
              </p>
            </div>
            <ul
              role="list"
              className="grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2"
            >
              {people.map((person) => (
                <li key={person.name}>
                  <div className="flex items-center gap-x-6">
                    <Image
                      className="h-16 w-16 rounded-full"
                      src={person.imageUrl}
                      alt=""
                      width={900}
                      height={900}
                    />
                    <div>
                      <h3 className="text-base font-semibold leading-7 tracking-tight text-gray-900">
                        {person.name}
                      </h3>
                      <p className="text-sm font-semibold leading-6 text-green-600">
                        {person.role}
                      </p>
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>

    <section className="relative isolate overflow-hidden bg-white px-6 py-24 sm:py-32 lg:px-8">
  <div className="absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,theme(colors.green.100),white)] opacity-20" />
  <div className="absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] bg-white shadow-xl shadow-green-600/10 ring-1 ring-green-50 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center" />
  <div className="mx-auto max-w-2xl lg:max-w-4xl">
    <h1 className="text-4xl font-bold text-center text-gray-900 mb-10">Our Mission</h1>
    <figure>
      <blockquote className="text-center text-xl font-semibold leading-8 text-gray-900 sm:text-2xl sm:leading-9">
        <p>
          “At PrakritiBazaar, we envision a future where every urban household is connected to nature through sustainable agricultural practices. Together, we strive to create greener, healthier, and more self-sufficient communities. We invite you to join us on this journey towards a more sustainable and harmonious urban life.”
        </p>
      </blockquote>
      <figcaption className="mt-10">
        <img
          className="mx-auto h-10 w-10 rounded-full"
          src="shivanshu.jpeg"
          alt=""
        />
        <div className="mt-4 flex items-center justify-center space-x-3 text-base">
          <div className="font-semibold text-gray-900">Shivanshu Bhashkar</div>
          <svg viewBox="0 0 2 2" width={3} height={3} aria-hidden="true" className="fill-gray-900">
            <circle cx={1} cy={1} r={1} />
          </svg>
          <div className="text-gray-600">Developer of PrakritiBazaar</div>
        </div>
      </figcaption>
    </figure>
  </div>
</section>


        <div className="bg-white">
          <div className="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8">
            <div className="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
              <svg
                viewBox="0 0 1024 1024"
                className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
                aria-hidden="true"
              >
                <circle
                  cx={512}
                  cy={512}
                  r={512}
                  fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
                  fillOpacity="0.7"
                />
                <defs>
                  <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
                    <stop stopColor="#F9FFF9" />
                    <stop offset={1} stopColor="#16A34A" />
                  </radialGradient>
                </defs>
              </svg>
              <div className="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
                <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
    Cultivating Nature&apos;s Bounty, Connecting Communities
</h2>
                <p className="mt-6 text-lg leading-8 text-gray-300">
                 At PrakritiBazaar, we have created a vibrant online platform that celebrates the beauty and abundance of nature. Our marketplace is dedicated to urban agriculture, where farmers, growers, and nature enthusiasts come together to share the fruits of their labor and a deep passion for cultivating the land.
                </p>
                <div className="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
                  <Link
                    href="/api/auth/signin"
                    className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                  >
                    Get started
                  </Link>
                    <Link
                    href="mailto:prakritibazaar@gmail.com"
                    className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                  >
                    Contact Support
                  </Link>
                </div>
              </div>
              <div className="relative mt-16 h-80 lg:mt-8">
                <Image
                  className="absolute left-0 top-0 w-[57rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10"
                  src="/Screenshot.png"
                  alt="App screenshot"
                  width={1824}
                  height={1080}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <>
     <div className="bg-white text-white min-h-screen">
      <Nav />
   <main >    {children} </main>

    </div>
    </>
  );
}

## Navbar.js
import { signOut } from 'next-auth/react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { Fragment } from 'react'
import { Dialog, Popover,Menu, Tab, Transition } from '@headlessui/react'
import { Bars3Icon, MagnifyingGlassIcon, ShoppingBagIcon, XMarkIcon } from '@heroicons/react/24/outline'
import { UserCircleIcon } from '@heroicons/react/24/solid';
import { useEffect, useState } from "react";
import MakePaymentComponent from '@/components/MakePaymentComponent'
import Link from "next/link";

const navigation = {
  pages: [
    { name: 'Home', href: '/' },
    { name: 'Orders', href: '/orders' },
  ],
}


function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

export default function Example() {
   const { data: session } = useSession();
   const [search, setSearch] = useState(false)
 const [noResults, setNoResults] = useState(false);
  const router = useRouter();
  const [open, setOpen] = useState(false)
  const [cart, setCart] = useState(false)
  const [user, setUser] = useState({ name: '', image: '' });
  const [cartItems, setCartItems] = useState([]);
    const [cartNo, setCartNo] = useState(0);
    const [ProductIDs, setProductIDs] = useState("");
    const [searchQuery, setSearchQuery] = useState("");
    const [searchResults, setSearchResults] = useState([]);

 const handleSearchInputChange = (e) => {
    setSearchQuery(e.target.value);
  };

 // Function to handle search submission
  const handleSearchSubmit = () => {

    fetch(`/api/products?name=${searchQuery}`)
      .then((response) => response.json())
      .then((data) => {
      setSearchResults(data);
        setNoResults(data.length === 0);
      })
      .catch((error) => {
        console.error('Error searching for products:', error);
      });
  };

  async function logout() {
    await router.push('/');
    await signOut();
  }

async function removeProductFromCart(productId) {
  const email = session.user.email;

  const response = await fetch('/api/removeFromCart', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ email, productId }),
  });

  if (response.ok) {
    const updatedCart = [...cartItems]; // Create a copy of cartItems
    const index = updatedCart.findIndex(item => item._id === productId);

    if (index !== -1) {
      updatedCart.splice(index, 1); // Remove one instance of the product
      setCartItems(updatedCart);
      setCartNo(updatedCart.length);
    }
  } else {
    // Handle error case
    console.error('Error removing product from cart');
  }
}


async function fetchProductData(productIds) {
  const response = await fetch(`/api/product/product-ids?ids=${productIds.join(",")}`);
  const data = await response.json();


  if (Array.isArray(data)) {
    // If data is an array, proceed with mapping
    if (user) {
      // Merge the product data with the cart data to include the quantity
      const cartWithQuantity = data.map(product => {
        const cartItem = user.cart ? user.cart.find(item => item.productId === product.id) : null;
        return {
          ...product,
          quantity: cartItem ? cartItem.quantity : 1,
        };
      });
      setCartItems(cartWithQuantity);
    }
  } else {
    // Handle case where data is not an array (no products found)
    console.error("No products found.");
  }
}


 async function fetchUserData(email) {
    const response = await fetch(`/api/user?email=${email}`);
    const data = await response.json();
    setUser(data);
    const productIds = data.cart.map(item => item.productId);
    setCartNo(productIds.length)
    fetchProductData(productIds);
  }


  useEffect(() => {
    if (router.query.cart !== undefined) {
      setCart(true);
    }
  }, [router.query.cart]);

 useEffect(() => {
    if (session) {
      fetchUserData(session.user.email);

    }
  }, [session]);


    if (!session) {
    return <div>Loading Your Data ...</div>;
  }

  const totalCartPrice = cartItems.reduce((total, product) => total + (product.price * product.quantity), 0);


  return (
    <div className="bg-white">
      {/* Mobile menu */}
      <Transition.Root show={open} as={Fragment}>
        <Dialog as="div" className="relative z-40 lg:hidden" onClose={setOpen}>
          <Transition.Child
            as={Fragment}
            enter="transition-opacity ease-linear duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="transition-opacity ease-linear duration-300"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 bg-black bg-opacity-25" />
          </Transition.Child>

          <div className="fixed inset-0 z-40 flex">
            <Transition.Child
              as={Fragment}
              enter="transition ease-in-out duration-300 transform"
              enterFrom="-translate-x-full"
              enterTo="translate-x-0"
              leave="transition ease-in-out duration-300 transform"
              leaveFrom="translate-x-0"
              leaveTo="-translate-x-full"
            >
              <Dialog.Panel className="relative flex w-full max-w-xs flex-col overflow-y-auto bg-white pb-12 shadow-xl">
                <div className="flex px-4 pb-2 pt-5">
                  <button
                    type="button"
                    className="relative -m-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400"
                    onClick={() => setOpen(false)}
                  >
                    <span className="absolute -inset-0.5" />
                    <span className="sr-only">Close menu</span>
                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                  </button>
                </div>


                <div className="space-y-6 border-t border-gray-200 px-4 py-6">
                  {navigation.pages.map((page) => (
                    <div key={page.name} className="flow-root">
                      <Link href={page.href} className="-m-2 block p-2 font-medium text-gray-900">
                        {page.name}
                      </Link>
                    </div>
                  ))}
                </div>

                <div className="space-y-6 border-t border-gray-200 px-4 py-6">
                  {user.role !== 'consumer' && (
       <>
  <div className="flow-root">
    <Link href="/createproduct" className="-m-2 block p-2 font-medium text-gray-900">
        Add A Product
    </Link>
  </div>
  <div className="flow-root">
    <Link href="/dashboard" className="-m-2 block p-2 font-medium text-gray-900">
        Dashboard
    </Link>
  </div>
</>

)}


                </div>


              </Dialog.Panel>
            </Transition.Child>
          </div>
        </Dialog>
      </Transition.Root>

      <header className="relative bg-white">
        <p className="flex h-10 items-center justify-center bg-green-600 px-4 text-sm font-medium text-white sm:px-6 lg:px-8">
          Cultivating Harmony 💚️
        </p>

        <nav aria-label="Top" className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="border-b border-gray-200">
            <div className="flex h-16 items-center">
              <button
                type="button"
                className="relative rounded-md bg-white p-2 text-gray-400 lg:hidden"
                onClick={() => setOpen(true)}
              >
                <span className="absolute -inset-0.5" />
                <span className="sr-only">Open menu</span>
                <Bars3Icon className="h-6 w-6" aria-hidden="true" />
              </button>

              {/* Logo */}
             <div className="ml-4 flex lg:ml-0">
  <Link href="/">
      <span className="sr-only">PB</span>
      <img
        className="h-10 w-auto"
        src="/logo.png"
        alt=""
      />
  </Link>
</div>

              {/* Flyout menus */}
              <Popover.Group className="hidden lg:ml-8 lg:block lg:self-stretch">
                <div className="flex h-full space-x-8">


                {navigation.pages.map((page) => {
  console.log(page.href);
  return (
    <div key={page.name} className="flow-root">
      <Link href={page.href} className="-m-2 block p-2 font-medium text-gray-900">
        {page.name}
      </Link>
    </div>
  );
})}

                </div>
              </Popover.Group>

              <div className="ml-auto flex items-center">
                <div className="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
       {user.role !== 'consumer' && (
            <>
  <Link href="/createproduct" className="text-sm font-medium text-gray-700 hover:text-gray-800">
      Add a Product
  </Link>
  <span className="h-6 w-px bg-gray-200" aria-hidden="true" />
  <Link href="/dashboard" className="text-sm font-medium text-gray-700 hover:text-gray-800">
      Dashboard
  </Link>
</>

              )}


                </div>


 <div className="flex lg:ml-6">

                 {/* Profile dropdown */}
                <Menu as="div" className="relative ml-3">
                  <div>
                    <Menu.Button className="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
                      <span className="absolute -inset-1.5" />
                      <span className="sr-only">Open user menu</span>
                      <img
                        className="h-8 w-8 rounded-full"
                        src={user.image}
                        alt=""
                      />
                    </Menu.Button>
                  </div>
                  <Transition
                    as={Fragment}
                    enter="transition ease-out duration-100"
                    enterFrom="transform opacity-0 scale-95"
                    enterTo="transform opacity-100 scale-100"
                    leave="transition ease-in duration-75"
                    leaveFrom="transform opacity-100 scale-100"
                    leaveTo="transform opacity-0 scale-95"
                  >
                    <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                      <Menu.Item>
                        {({ active }) => (
                        <Link
  href={`/user/${session.user.email}`}
  className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700')}
>
  Your Profile
</Link>

                        )}
                      </Menu.Item>
                      <Menu.Item>
                        {({ active }) => (
                          <Link
                            href="/settings"
                            className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700')}
                          >
                            Settings
                          </Link>
                        )}
                      </Menu.Item>
                      <Menu.Item>
                        {({ active }) => (
                          <Link
                            onClick={logout}
                            className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700')}
                          >
                            Sign out
                          </Link>
                        )}
                      </Menu.Item>
                    </Menu.Items>
                  </Transition>
                </Menu>
 </div>

                {/* Search */}
                <div className="flex lg:ml-6">

                  <Link  onClick={() => setSearch(true)} className="p-2 text-gray-400 hover:text-gray-500">
                    <span className="sr-only">Search</span>
                    <MagnifyingGlassIcon className="h-6 w-6" aria-hidden="true" />
                  </Link>
                </div>

                {/* Cart */}
                <div className="ml-4 flow-root lg:ml-6">
                  <Link onClick={() => setCart(true)} className="group -m-2 flex items-center p-2">
                    <ShoppingBagIcon
                      className="h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
                      aria-hidden="true"
                    />
                    <span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">{cartNo}</span>
                    <span className="sr-only">items in cart, view bag</span>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </nav>
      </header>
       <Transition.Root show={cart} as={Fragment}>
      <Dialog as="div" className="relative z-10" onClose={setCart}>
        <Transition.Child
          as={Fragment}
          enter="ease-in-out duration-500"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-in-out duration-500"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
        </Transition.Child>

        <div className="fixed inset-0 overflow-hidden">
          <div className="absolute inset-0 overflow-hidden">
            <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
              <Transition.Child
                as={Fragment}
                enter="transform transition ease-in-out duration-500 sm:duration-700"
                enterFrom="translate-x-full"
                enterTo="translate-x-0"
                leave="transform transition ease-in-out duration-500 sm:duration-700"
                leaveFrom="translate-x-0"
                leaveTo="translate-x-full"
              >
                <Dialog.Panel className="pointer-events-auto w-screen max-w-md">
                  <div className="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
                    <div className="flex-1 overflow-y-auto px-4 py-6 sm:px-6">
                      <div className="flex items-start justify-between">
                        <Dialog.Title className="text-lg font-medium text-gray-900">Shopping Cart ({cartNo})</Dialog.Title>
                        <div className="ml-3 flex h-7 items-center">
                          <button
                            type="button"
                            className="relative -m-2 p-2 text-gray-400 hover:text-gray-500"
                            onClick={() => setCart(false)}
                          >
                            <span className="absolute -inset-0.5" />
                            <span className="sr-only">Close panel</span>
                            <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                          </button>
                        </div>
                      </div>

                      <div className="mt-8">
                        <div className="flow-root">
                           <ul role="list" className="-my-6 divide-y divide-gray-200">
                           {cartNo === 0 ? (
  <div className="text-center mt-4 text-gray-700">Your Cart is Empty.</div>
) : (null)}
        {cartItems.map((product) => (
          <li key={product.id} className="flex py-6">
            <div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
              <img
                src={product.images[0]}
                alt={product.name}
                className="h-full w-full object-cover object-center"
              />
            </div>

            <div className="ml-4 flex flex-1 flex-col">
              <div>
                <div className="flex justify-between text-base font-medium text-gray-900">
                  <h3>
                    <Link onClick={() => router.push(`/product/${product._id}`)}>{product.name}</Link>
                  </h3>
                  <p className="ml-4">₹{product.price}</p>
                </div>

             <p className="text-gray-700">
  {product.description ? product.description.slice(0, 50) + "...." : "No description"}
</p>


              </div>
              <div className="flex flex-1 items-end justify-between text-sm">
              <button className="font-medium text-blue-500 hover:text-blue-600" onClick={() => router.push(`/product/${product._id}`)}>
  View
</button>
                <div className="flex">
      <button
        type="button"
        className="font-medium text-red-600 hover:text-red-500"
        onClick={() => removeProductFromCart(product._id)}
      >
        Remove
      </button>
    </div>
              </div>
            </div>
          </li>
        ))}
      </ul>
                        </div>
                      </div>
                    </div>

                    <div className="border-t border-gray-200 px-4 py-6 sm:px-6">
                      <div className="flex justify-between text-base font-medium text-gray-900">
                        <p>Subtotal</p>
                        <p>₹{totalCartPrice}</p>
                      </div>
                  <p className="flex justify-between text-base font-medium text-gray-700">Note: Your Products will be delivered at {user.address} by the seller.</p>
                    {cartNo > 0 && (
  <div className="mt-6">
   <MakePaymentComponent
      email={user.email}
      phoneNumber={user.phoneNumber}
      name={user.name}
      price={totalCartPrice}
      address={user.address}
      cart={cartItems}
    />
  </div>
)}

                      <div className="mt-6 flex justify-center text-center text-sm text-gray-500">
                        <p>

                          <button
                            type="button"
                            className="font-medium text-green-600 hover:text-green-500"
                            onClick={() => setCart(false)}
                          >
                            Continue Shopping
                            <span aria-hidden="true"> &rarr;</span>
                          </button>
                        </p>
                      </div>
                    </div>
                  </div>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </div>
        </div>
      </Dialog>
    </Transition.Root>
   <Transition.Root show={search} as={Fragment}>
      <Dialog as="div" className="relative z-10" onClose={setSearch}>
        <Transition.Child
          as={Fragment}
          enter="ease-in-out duration-500"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-in-out duration-500"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
        </Transition.Child>

        <div className="fixed inset-0 overflow-hidden">
          <div className="absolute inset-0 overflow-hidden">
            <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
              <Transition.Child
                as={Fragment}
                enter="transform transition ease-in-out duration-500 sm:duration-700"
                enterFrom="translate-x-full"
                enterTo="translate-x-0"
                leave="transform transition ease-in-out duration-500 sm:duration-700"
                leaveFrom="translate-x-0"
                leaveTo="translate-x-full"
              >
                <Dialog.Panel className="pointer-events-auto relative w-screen max-w-md">
                  <Transition.Child
                    as={Fragment}
                    enter="ease-in-out duration-500"
                    enterFrom="opacity-0"
                    enterTo="opacity-100"
                    leave="ease-in-out duration-500"
                    leaveFrom="opacity-100"
                    leaveTo="opacity-0"
                  >
                    <div className="absolute left-0 top-0 -ml-8 flex pr-2 pt-4 sm:-ml-10 sm:pr-4">
                      <button
                        type="button"
                        className="relative rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
                        onClick={() => setSearch(false)}
                      >
                        <span className="absolute -inset-2.5" />
                        <span className="sr-only">Close panel</span>
                        <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                      </button>
                    </div>
                  </Transition.Child>
                  <div className="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl">
                    <div className="px-4 sm:px-6">
                      <Dialog.Title className="text-base font-semibold leading-6 text-gray-900">
                        Search 🔎️
                      </Dialog.Title>
                    </div>
                    <div className="relative mt-6 flex-1 px-4 sm:px-6">
                     <div className="relative">
          <input
            type="text"
            className="border border-gray-300 rounded-md py-2 px-3 pr-10 placeholder-gray-400 focus:outline-none focus:ring focus:ring-green-400 text-gray-900"
            placeholder="Search for products"
            value={searchQuery}
            style={{ width: '100%' }}
            onChange={handleSearchInputChange}
          />
          <button
            onClick={handleSearchSubmit}
            className="absolute inset-y-0 right-0 flex items-center px-4 bg-green-600 text-white rounded-r-md hover:bg-green-700 focus:outline-none focus:ring focus:ring-green-400"
          >
            Search
          </button>
        </div>
   <div className="mt-8">
    {noResults ? (
          <div className="text-gray-700">No results found.</div>
        ) : (
        <ul>
          {searchResults.map((product) => (
            <li key={product.id} className="flex py-6">
              <div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
                <img
                  src={product.images[1]}
                  alt={product.images[1]}
                  className="h-full w-full object-cover object-center"
                />
              </div>
              <div className="ml-4 flex flex-1 flex-col">
                <div>
                  <div className="flex justify-between text-base font-medium text-gray-900">
                    <h3>
                      <Link onClick={() => router.push(`/product/${product._id}`)}>{product.name}</Link>
                    </h3>
                    <p className="ml-4">₹{product.price}</p>
                  </div>
                  <p className="text-gray-700">
                    {product.description ? product.description.slice(0, 50) + "...." : "No description"}
                  </p>
                </div>
                <div className="flex flex-1 items-end justify-between text-sm">
          <button className="font-medium text-blue-500 hover:text-blue-600" onClick={() => router.push(`/product/${product._id}`)}>
  View
</button>


                </div>
              </div>
            </li>
          ))}
        </ul>
         )}
      </div>
                    </div>
                  </div>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </div>
        </div>
      </Dialog>
    </Transition.Root>
    </div>
  )
}
	import Image from "next/image";
	import { useSession, signIn, signOut } from "next-auth/react";
	import { useState } from "react";
	import { useRouter } from "next/router";
	import Nav from "@/components/Navbar";
	import { Dialog } from "@headlessui/react";
	import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
	import {ChatBubbleLeftRightIcon} from "@heroicons/react/24/outline";
	import Head from "next/head";
	import Link from "next/link";
	import { CurrencyRupeeIcon } from "@heroicons/react/24/outline";
	import { ShoppingBagIcon } from "@heroicons/react/24/outline";
	import { UserGroupIcon } from "@heroicons/react/24/outline";
	import React, { useEffect } from 'react';
	import { LockClosedIcon } from "@heroicons/react/24/outline";
	import { FireIcon } from "@heroicons/react/24/outline";

	const navigation = [
	{ name: "", href: "#" },
	{ name: "", href: "#" },
	{ name: "", href: "#" },
	];

	const features = [
	{
	name: "Easy Goods Purchase",
	description:
	"Effortlessly browse and buy a wide variety of agricultural products, all tailored to urban gardening needs. Our user-friendly platform ensures a seamless shopping experience, so you can get back to tending your green oasis.",
	icon: ShoppingBagIcon, // Use a string identifier or a name for the icon
	},
	{
	name: "Sell and Earn",
	description:
	"Become a seller on PrakritiBazaar and share your expertise with the community. List your seeds, vegetables, fruit, and more, and contribute to the urban agriculture movement while earning from your efforts.",
	icon: CurrencyRupeeIcon, // Use a string identifier or a name for the icon
	},
	{
	name: "Fast-Speed, Seamless Experience",
	description:
	"Enjoy lightning-fast loading times and a seamless browsing experience on PrakritiBazaar. Our platform is optimized for speed, ensuring that you can find what you need quickly and efficiently.",
	icon: FireIcon, // Use a string identifier or a name for the icon
	},
	{
	name: "Passwordless, Easy, and Highly Secure Login",
	description:
	"Experience a seamless and secure entry into PrakritiBazaar with our passwordless login system. Say goodbye to the hassle of remembering complex passwords. Our innovative login process ensures a smooth, convenient, and highly secure access to your account.",
	icon: LockClosedIcon, // Use a string identifier or a name for the icon
	},
	];

	const people = [
	{
	name: "Shivanshu",
	role: "Full-Stack Web Developer",
	imageUrl: "/shivanshu.jpeg",
	},
	{
	name: "Archit",
	role: "Video Editor and Graphic Designer",
	imageUrl: "/archit.jpeg",
	},
	];

	const links = [
	{ name: "Instagram", href: "https://www.instagram.com/gamernetworx/" },
	{ name: "Contact Support", href: "mailto:gamernetworx@gmail.com" },
	];
	const stats = [
	{ name: "Offices worldwide", value: "12" },
	{ name: "Full-time colleagues", value: "300+" },
	{ name: "Hours per week", value: "40" },
	{ name: "Paid time off", value: "Unlimited" },
	];

	export default function Layout({ children }) {
	const [showNav, setShowNav] = useState(false);
	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
	const router = useRouter();
	const { data: session } = useSession();

	useEffect(() => {
	var Tawk_API=Tawk_API\|\|{}, Tawk_LoadStart=new Date();
	(function(){
	var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
	s1.async=true;
	s1.src='https://embed.tawk.to/6534edc3a84dd54dc483c70f/1hdbc1h6l';
	s1.charset='UTF-8';
	s1.setAttribute('crossorigin','*');
	s0.parentNode.insertBefore(s1,s0);
	})();
	}, []);


	async function logout() {
	await router.push("/");
	await signOut();
	}

	if (!session) {
	return (
	<div className="bg-white">
	<Head>
	<title>Prakriti Bazaar</title>
	</Head>

	<header className="absolute inset-x-0 top-0 z-50">
	<nav
	className="flex items-center justify-between p-6 lg:px-8"
	aria-label="Global"
	>
	<div className="flex lg:flex-1">
	<Link href="#" className="-m-1.5 p-1.5">
	<span className="sr-only">Prakriti Bazaar</span>
	<Image
	className="h-10 w-auto"
	src="/logo.png"
	alt=""
	width={1000}
	height={1000}
	/>
	</Link>
	</div>
	<div className="flex lg:hidden">
	<button
	type="button"
	className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
	onClick={() => setMobileMenuOpen(true)}
	>
	<span className="sr-only">Open main menu</span>
	<Bars3Icon className="h-6 w-6" aria-hidden="true" />
	</button>
	</div>
	<div className="hidden lg:flex lg:gap-x-12">
	{navigation.map((item) => (
	<Link
	key={item.name}
	href={item.href}
	className="text-sm font-semibold leading-6 text-gray-900"
	>
	{item.name}
	</Link>
	))}
	</div>
	<div className="hidden lg:flex lg:flex-1 lg:justify-end">
	<Link
	href="/api/auth/signin"
	className="text-sm font-semibold leading-6 text-gray-900"
	>
	Log in <span aria-hidden="true">→</span>
	</Link>
	</div>
	</nav>
	<Dialog
	as="div"
	className="lg:hidden"
	open={mobileMenuOpen}
	onClose={setMobileMenuOpen}
	>
	<div className="fixed inset-0 z-50" />
	<Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
	<div className="flex lg:flex-1">
	<Link href="/" className="-m-1.5 p-1.5">
	<span className="sr-only">Prakriti Bazaar</span>
	<Image
	className="h-10 w-auto"
	src="/logo.png"
	alt=""
	width={1000}
	height={1000}
	/>
	</Link>


	<button
	type="button"
	className="-m-2.5 rounded-md p-2.5 text-gray-700"
	onClick={() => setMobileMenuOpen(false)}
	>
	<span className="sr-only">Close menu</span>
	<XMarkIcon className="h-6 w-6" aria-hidden="true" />
	</button>
	</div>
	<div className="mt-6 flow-root">
	<div className="-my-6 divide-y divide-gray-500/10">
	<div className="space-y-2 py-6">
	{navigation.map((item) => (
	<Link
	key={item.name}
	href={item.href}
	className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
	>
	{item.name}
	</Link>
	))}
	</div>
	<div className="py-6">
	<Link
	href="/api/auth/signin"
	className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
	>
	Log in
	</Link>
	</div>
	</div>
	</div>
	</Dialog.Panel>
	</Dialog>
	</header>

	<div className="relative isolate px-6 pt-14 lg:px-8">
	<div
	className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
	aria-hidden="true"
	>
	<div
	className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#80ff95] to-[#89fc92] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
	style={{
	clipPath:
	"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
	}}
	/>
	</div>
	<div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
	<div className="hidden sm:mb-8 sm:flex sm:justify-center">
	<div className="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
	Cultivating Harmony 💚️
	</div>
	</div>
	<div className="text-center">
	<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
	Welcome to Prakriti Bazaar!!
	</h1>
	<p className="mt-6 text-lg leading-8 text-gray-600">
	From Fields to Festivities
	</p>
	<div className="mt-10 flex items-center justify-center gap-x-6">
	<Link
	href="/api/auth/signin"
	className="rounded-md bg-green-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
	>
	Get started
	</Link>
	</div>
	</div>
	</div>
	<div
	className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
	aria-hidden="true"
	>
	<div
	className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#80ff95] to-[#89fc92] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
	style={{
	clipPath:
	"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
	}}
	/>
	</div>
	</div>

	<div className="bg-white py-24 sm:py-32">
	<div className="mx-auto max-w-7xl px-6 lg:px-8">
	<div className="mx-auto max-w-2xl lg:text-center">
	<h2 className="text-base font-semibold leading-7 text-green-600">
	Discover the Exciting Features of
	</h2>
	<p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
	Your Urban Agriculture Hub
	</p>
	<p className="mt-6 text-lg leading-8 text-gray-600">
	PrakritiBazaar is a vibrant online marketplace dedicated to urban agriculture and sustainable living. We believe in bringing the bounty of nature closer to urban dwellers, fostering a deeper connection with the environment. Whether you are a seasoned gardener or just starting out, PrakritiBazaar provides a platform to explore, buy, and sell a wide array of agricultural products right from the heart of the city.
	</p>
	</div>
	<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
	<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
	{features.map((feature) => (
	<div key={feature.name} className="relative pl-16">
	<dt className="text-base font-semibold leading-7 text-gray-900">
	<div className="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-green-600">
	<feature.icon
	className="h-6 w-6 text-white"
	aria-hidden="true"
	/>
	</div>
	{feature.name}
	</dt>
	<dd className="mt-2 text-base leading-7 text-gray-600">
	{feature.description}
	</dd>
	</div>
	))}
	</dl>
	</div>
	</div>
	</div>
	<div className="bg-white py-24 sm:py-32">
	<div className="mx-auto grid max-w-7xl gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
	<div className="max-w-2xl">
	<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
	Meet our dynamic leaders at PrakritiBazaar
	</h2>
	<p className="mt-6 text-lg leading-8 text-gray-600">
	where Shivanshu, our skilled Full-Stack Web Developer, has brought our website to life with seamless functionality and beautiful design, while Archit, our talented Video Editor and Graphic Designer, has shaped our visual identity through a distinctive logo and informative tutorials. Together, they spearhead our mission to empower urban gardeners and enthusiasts in creating a greener, more sustainable urban lifestyle.
	</p>
	</div>
	<ul
	role="list"
	className="grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2"
	>
	{people.map((person) => (
	<li key={person.name}>
	<div className="flex items-center gap-x-6">
	<Image
	className="h-16 w-16 rounded-full"
	src={person.imageUrl}
	alt=""
	width={900}
	height={900}
	/>
	<div>
	<h3 className="text-base font-semibold leading-7 tracking-tight text-gray-900">
	{person.name}
	</h3>
	<p className="text-sm font-semibold leading-6 text-green-600">
	{person.role}
	</p>
	</div>
	</div>
	</li>
	))}
	</ul>
	</div>
	</div>

	<section className="relative isolate overflow-hidden bg-white px-6 py-24 sm:py-32 lg:px-8">
	<div className="absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,theme(colors.green.100),white)] opacity-20" />
	<div className="absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] bg-white shadow-xl shadow-green-600/10 ring-1 ring-green-50 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center" />
	<div className="mx-auto max-w-2xl lg:max-w-4xl">
	<h1 className="text-4xl font-bold text-center text-gray-900 mb-10">Our Mission</h1>
	<figure>
	<blockquote className="text-center text-xl font-semibold leading-8 text-gray-900 sm:text-2xl sm:leading-9">
	<p>
	“At PrakritiBazaar, we envision a future where every urban household is connected to nature through sustainable agricultural practices. Together, we strive to create greener, healthier, and more self-sufficient communities. We invite you to join us on this journey towards a more sustainable and harmonious urban life.”
	</p>
	</blockquote>
	<figcaption className="mt-10">
	<img
	className="mx-auto h-10 w-10 rounded-full"
	src="shivanshu.jpeg"
	alt=""
	/>
	<div className="mt-4 flex items-center justify-center space-x-3 text-base">
	<div className="font-semibold text-gray-900">Shivanshu Bhashkar</div>
	<svg viewBox="0 0 2 2" width={3} height={3} aria-hidden="true" className="fill-gray-900">
	<circle cx={1} cy={1} r={1} />
	</svg>
	<div className="text-gray-600">Developer of PrakritiBazaar</div>
	</div>
	</figcaption>
	</figure>
	</div>
	</section>


	<div className="bg-white">
	<div className="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8">
	<div className="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
	<svg
	viewBox="0 0 1024 1024"
	className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
	aria-hidden="true"
	>
	<circle
	cx={512}
	cy={512}
	r={512}
	fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
	fillOpacity="0.7"
	/>
	<defs>
	<radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
	<stop stopColor="#F9FFF9" />
	<stop offset={1} stopColor="#16A34A" />
	</radialGradient>
	</defs>
	</svg>
	<div className="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
	<h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
	Cultivating Nature's Bounty, Connecting Communities
	</h2>
	<p className="mt-6 text-lg leading-8 text-gray-300">
	At PrakritiBazaar, we have created a vibrant online platform that celebrates the beauty and abundance of nature. Our marketplace is dedicated to urban agriculture, where farmers, growers, and nature enthusiasts come together to share the fruits of their labor and a deep passion for cultivating the land.
	</p>
	<div className="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
	<Link
	href="/api/auth/signin"
	className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
	>
	Get started
	</Link>
	<Link
	href="mailto:prakritibazaar@gmail.com"
	className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
	>
	Contact Support
	</Link>
	</div>
	</div>
	<div className="relative mt-16 h-80 lg:mt-8">
	<Image
	className="absolute left-0 top-0 w-[57rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10"
	src="/Screenshot.png"
	alt="App screenshot"
	width={1824}
	height={1080}
	/>
	</div>
	</div>
	</div>
	</div>
	</div>
	);
	}

	return (
	<>
	<div className="bg-white text-white min-h-screen">
	<Nav />
	<main > {children} </main>

	</div>
	</>
	);
	}
	import { signOut } from 'next-auth/react';
	import { useSession } from 'next-auth/react';
	import { useRouter } from 'next/router';
	import { Fragment } from 'react'
	import { Dialog, Popover,Menu, Tab, Transition } from '@headlessui/react'
	import { Bars3Icon, MagnifyingGlassIcon, ShoppingBagIcon, XMarkIcon } from '@heroicons/react/24/outline'
	import { UserCircleIcon } from '@heroicons/react/24/solid';
	import { useEffect, useState } from "react";
	import MakePaymentComponent from '@/components/MakePaymentComponent'
	import Link from "next/link";

	const navigation = {
	pages: [
	{ name: 'Home', href: '/' },
	{ name: 'Orders', href: '/orders' },
	],
	}


	function classNames(...classes) {
	return classes.filter(Boolean).join(' ')
	}

	export default function Example() {
	const { data: session } = useSession();
	const [search, setSearch] = useState(false)
	const [noResults, setNoResults] = useState(false);
	const router = useRouter();
	const [open, setOpen] = useState(false)
	const [cart, setCart] = useState(false)
	const [user, setUser] = useState({ name: '', image: '' });
	const [cartItems, setCartItems] = useState([]);
	const [cartNo, setCartNo] = useState(0);
	const [ProductIDs, setProductIDs] = useState("");
	const [searchQuery, setSearchQuery] = useState("");
	const [searchResults, setSearchResults] = useState([]);

	const handleSearchInputChange = (e) => {
	setSearchQuery(e.target.value);
	};

	// Function to handle search submission
	const handleSearchSubmit = () => {

	fetch(`/api/products?name=${searchQuery}`)
	.then((response) => response.json())
	.then((data) => {
	setSearchResults(data);
	setNoResults(data.length === 0);
	})
	.catch((error) => {
	console.error('Error searching for products:', error);
	});
	};

	async function logout() {
	await router.push('/');
	await signOut();
	}

	async function removeProductFromCart(productId) {
	const email = session.user.email;

	const response = await fetch('/api/removeFromCart', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	},
	body: JSON.stringify({ email, productId }),
	});

	if (response.ok) {
	const updatedCart = [...cartItems]; // Create a copy of cartItems
	const index = updatedCart.findIndex(item => item._id === productId);

	if (index !== -1) {
	updatedCart.splice(index, 1); // Remove one instance of the product
	setCartItems(updatedCart);
	setCartNo(updatedCart.length);
	}
	} else {
	// Handle error case
	console.error('Error removing product from cart');
	}
	}



	async function fetchProductData(productIds) {
	const response = await fetch(`/api/product/product-ids?ids=${productIds.join(",")}`);
	const data = await response.json();



	if (Array.isArray(data)) {
	// If data is an array, proceed with mapping
	if (user) {
	// Merge the product data with the cart data to include the quantity
	const cartWithQuantity = data.map(product => {
	const cartItem = user.cart ? user.cart.find(item => item.productId === product.id) : null;
	return {
	...product,
	quantity: cartItem ? cartItem.quantity : 1,
	};
	});
	setCartItems(cartWithQuantity);
	}
	} else {
	// Handle case where data is not an array (no products found)
	console.error("No products found.");
	}
	}



	async function fetchUserData(email) {
	const response = await fetch(`/api/user?email=${email}`);
	const data = await response.json();
	setUser(data);
	const productIds = data.cart.map(item => item.productId);
	setCartNo(productIds.length)
	fetchProductData(productIds);
	}


	useEffect(() => {
	if (router.query.cart !== undefined) {
	setCart(true);
	}
	}, [router.query.cart]);

	useEffect(() => {
	if (session) {
	fetchUserData(session.user.email);

	}
	}, [session]);



	if (!session) {
	return <div>Loading Your Data ...</div>;
	}

	const totalCartPrice = cartItems.reduce((total, product) => total + (product.price * product.quantity), 0);



	return (
	<div className="bg-white">
	{/* Mobile menu */}
	<Transition.Root show={open} as={Fragment}>
	<Dialog as="div" className="relative z-40 lg:hidden" onClose={setOpen}>
	<Transition.Child
	as={Fragment}
	enter="transition-opacity ease-linear duration-300"
	enterFrom="opacity-0"
	enterTo="opacity-100"
	leave="transition-opacity ease-linear duration-300"
	leaveFrom="opacity-100"
	leaveTo="opacity-0"
	>
	<div className="fixed inset-0 bg-black bg-opacity-25" />
	</Transition.Child>

	<div className="fixed inset-0 z-40 flex">
	<Transition.Child
	as={Fragment}
	enter="transition ease-in-out duration-300 transform"
	enterFrom="-translate-x-full"
	enterTo="translate-x-0"
	leave="transition ease-in-out duration-300 transform"
	leaveFrom="translate-x-0"
	leaveTo="-translate-x-full"
	>
	<Dialog.Panel className="relative flex w-full max-w-xs flex-col overflow-y-auto bg-white pb-12 shadow-xl">
	<div className="flex px-4 pb-2 pt-5">
	<button
	type="button"
	className="relative -m-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400"
	onClick={() => setOpen(false)}
	>
	<span className="absolute -inset-0.5" />
	<span className="sr-only">Close menu</span>
	<XMarkIcon className="h-6 w-6" aria-hidden="true" />
	</button>
	</div>



	<div className="space-y-6 border-t border-gray-200 px-4 py-6">
	{navigation.pages.map((page) => (
	<div key={page.name} className="flow-root">
	<Link href={page.href} className="-m-2 block p-2 font-medium text-gray-900">
	{page.name}
	</Link>
	</div>
	))}
	</div>

	<div className="space-y-6 border-t border-gray-200 px-4 py-6">
	{user.role !== 'consumer' && (
	<>
	<div className="flow-root">
	<Link href="/createproduct" className="-m-2 block p-2 font-medium text-gray-900">
	Add A Product
	</Link>
	</div>
	<div className="flow-root">
	<Link href="/dashboard" className="-m-2 block p-2 font-medium text-gray-900">
	Dashboard
	</Link>
	</div>
	</>

	)}


	</div>


	</Dialog.Panel>
	</Transition.Child>
	</div>
	</Dialog>
	</Transition.Root>

	<header className="relative bg-white">
	<p className="flex h-10 items-center justify-center bg-green-600 px-4 text-sm font-medium text-white sm:px-6 lg:px-8">
	Cultivating Harmony 💚️
	</p>

	<nav aria-label="Top" className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
	<div className="border-b border-gray-200">
	<div className="flex h-16 items-center">
	<button
	type="button"
	className="relative rounded-md bg-white p-2 text-gray-400 lg:hidden"
	onClick={() => setOpen(true)}
	>
	<span className="absolute -inset-0.5" />
	<span className="sr-only">Open menu</span>
	<Bars3Icon className="h-6 w-6" aria-hidden="true" />
	</button>

	{/* Logo */}
	<div className="ml-4 flex lg:ml-0">
	<Link href="/">
	<span className="sr-only">PB</span>
	<img
	className="h-10 w-auto"
	src="/logo.png"
	alt=""
	/>
	</Link>
	</div>

	{/* Flyout menus */}
	<Popover.Group className="hidden lg:ml-8 lg:block lg:self-stretch">
	<div className="flex h-full space-x-8">


	{navigation.pages.map((page) => {
	console.log(page.href);
	return (
	<div key={page.name} className="flow-root">
	<Link href={page.href} className="-m-2 block p-2 font-medium text-gray-900">
	{page.name}
	</Link>
	</div>
	);
	})}

	</div>
	</Popover.Group>

	<div className="ml-auto flex items-center">
	<div className="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
	{user.role !== 'consumer' && (
	<>
	<Link href="/createproduct" className="text-sm font-medium text-gray-700 hover:text-gray-800">
	Add a Product
	</Link>
	<span className="h-6 w-px bg-gray-200" aria-hidden="true" />
	<Link href="/dashboard" className="text-sm font-medium text-gray-700 hover:text-gray-800">
	Dashboard
	</Link>
	</>

	)}


	</div>



	<div className="flex lg:ml-6">

	{/* Profile dropdown */}
	<Menu as="div" className="relative ml-3">
	<div>
	<Menu.Button className="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
	<span className="absolute -inset-1.5" />
	<span className="sr-only">Open user menu</span>
	<img
	className="h-8 w-8 rounded-full"
	src={user.image}
	alt=""
	/>
	</Menu.Button>
	</div>
	<Transition
	as={Fragment}
	enter="transition ease-out duration-100"
	enterFrom="transform opacity-0 scale-95"
	enterTo="transform opacity-100 scale-100"
	leave="transition ease-in duration-75"
	leaveFrom="transform opacity-100 scale-100"
	leaveTo="transform opacity-0 scale-95"
	>
	<Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
	<Menu.Item>
	{({ active }) => (
	<Link
	href={`/user/${session.user.email}`}
	className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700')}
	>
	Your Profile
	</Link>

	)}
	</Menu.Item>
	<Menu.Item>
	{({ active }) => (
	<Link
	href="/settings"
	className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700')}
	>
	Settings
	</Link>
	)}
	</Menu.Item>
	<Menu.Item>
	{({ active }) => (
	<Link
	onClick={logout}
	className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700')}
	>
	Sign out
	</Link>
	)}
	</Menu.Item>
	</Menu.Items>
	</Transition>
	</Menu>
	</div>

	{/* Search */}
	<div className="flex lg:ml-6">

	<Link onClick={() => setSearch(true)} className="p-2 text-gray-400 hover:text-gray-500">
	<span className="sr-only">Search</span>
	<MagnifyingGlassIcon className="h-6 w-6" aria-hidden="true" />
	</Link>
	</div>

	{/* Cart */}
	<div className="ml-4 flow-root lg:ml-6">
	<Link onClick={() => setCart(true)} className="group -m-2 flex items-center p-2">
	<ShoppingBagIcon
	className="h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
	aria-hidden="true"
	/>
	<span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">{cartNo}</span>
	<span className="sr-only">items in cart, view bag</span>
	</Link>
	</div>
	</div>
	</div>
	</div>
	</nav>
	</header>
	<Transition.Root show={cart} as={Fragment}>
	<Dialog as="div" className="relative z-10" onClose={setCart}>
	<Transition.Child
	as={Fragment}
	enter="ease-in-out duration-500"
	enterFrom="opacity-0"
	enterTo="opacity-100"
	leave="ease-in-out duration-500"
	leaveFrom="opacity-100"
	leaveTo="opacity-0"
	>
	<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
	</Transition.Child>

	<div className="fixed inset-0 overflow-hidden">
	<div className="absolute inset-0 overflow-hidden">
	<div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
	<Transition.Child
	as={Fragment}
	enter="transform transition ease-in-out duration-500 sm:duration-700"
	enterFrom="translate-x-full"
	enterTo="translate-x-0"
	leave="transform transition ease-in-out duration-500 sm:duration-700"
	leaveFrom="translate-x-0"
	leaveTo="translate-x-full"
	>
	<Dialog.Panel className="pointer-events-auto w-screen max-w-md">
	<div className="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
	<div className="flex-1 overflow-y-auto px-4 py-6 sm:px-6">
	<div className="flex items-start justify-between">
	<Dialog.Title className="text-lg font-medium text-gray-900">Shopping Cart ({cartNo})</Dialog.Title>
	<div className="ml-3 flex h-7 items-center">
	<button
	type="button"
	className="relative -m-2 p-2 text-gray-400 hover:text-gray-500"
	onClick={() => setCart(false)}
	>
	<span className="absolute -inset-0.5" />
	<span className="sr-only">Close panel</span>
	<XMarkIcon className="h-6 w-6" aria-hidden="true" />
	</button>
	</div>
	</div>

	<div className="mt-8">
	<div className="flow-root">
	<ul role="list" className="-my-6 divide-y divide-gray-200">
	{cartNo === 0 ? (
	<div className="text-center mt-4 text-gray-700">Your Cart is Empty.</div>
	) : (null)}
	{cartItems.map((product) => (
	<li key={product.id} className="flex py-6">
	<div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
	<img
	src={product.images[0]}
	alt={product.name}
	className="h-full w-full object-cover object-center"
	/>
	</div>

	<div className="ml-4 flex flex-1 flex-col">
	<div>
	<div className="flex justify-between text-base font-medium text-gray-900">
	<h3>
	<Link onClick={() => router.push(`/product/${product._id}`)}>{product.name}</Link>
	</h3>
	<p className="ml-4">₹{product.price}</p>
	</div>

	<p className="text-gray-700">
	{product.description ? product.description.slice(0, 50) + "...." : "No description"}
	</p>



	</div>
	<div className="flex flex-1 items-end justify-between text-sm">
	<button className="font-medium text-blue-500 hover:text-blue-600" onClick={() => router.push(`/product/${product._id}`)}>
	View
	</button>
	<div className="flex">
	<button
	type="button"
	className="font-medium text-red-600 hover:text-red-500"
	onClick={() => removeProductFromCart(product._id)}
	>
	Remove
	</button>
	</div>
	</div>
	</div>
	</li>
	))}
	</ul>
	</div>
	</div>
	</div>

	<div className="border-t border-gray-200 px-4 py-6 sm:px-6">
	<div className="flex justify-between text-base font-medium text-gray-900">
	<p>Subtotal</p>
	<p>₹{totalCartPrice}</p>
	</div>
	<p className="flex justify-between text-base font-medium text-gray-700">Note: Your Products will be delivered at {user.address} by the seller.</p>
	{cartNo > 0 && (
	<div className="mt-6">
	<MakePaymentComponent
	email={user.email}
	phoneNumber={user.phoneNumber}
	name={user.name}
	price={totalCartPrice}
	address={user.address}
	cart={cartItems}
	/>
	</div>
	)}

	<div className="mt-6 flex justify-center text-center text-sm text-gray-500">
	<p>

	<button
	type="button"
	className="font-medium text-green-600 hover:text-green-500"
	onClick={() => setCart(false)}
	>
	Continue Shopping
	<span aria-hidden="true"> →</span>
	</button>
	</p>
	</div>
	</div>
	</div>
	</Dialog.Panel>
	</Transition.Child>
	</div>
	</div>
	</div>
	</Dialog>
	</Transition.Root>
	<Transition.Root show={search} as={Fragment}>
	<Dialog as="div" className="relative z-10" onClose={setSearch}>
	<Transition.Child
	as={Fragment}
	enter="ease-in-out duration-500"
	enterFrom="opacity-0"
	enterTo="opacity-100"
	leave="ease-in-out duration-500"
	leaveFrom="opacity-100"
	leaveTo="opacity-0"
	>
	<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
	</Transition.Child>

	<div className="fixed inset-0 overflow-hidden">
	<div className="absolute inset-0 overflow-hidden">
	<div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
	<Transition.Child
	as={Fragment}
	enter="transform transition ease-in-out duration-500 sm:duration-700"
	enterFrom="translate-x-full"
	enterTo="translate-x-0"
	leave="transform transition ease-in-out duration-500 sm:duration-700"
	leaveFrom="translate-x-0"
	leaveTo="translate-x-full"
	>
	<Dialog.Panel className="pointer-events-auto relative w-screen max-w-md">
	<Transition.Child
	as={Fragment}
	enter="ease-in-out duration-500"
	enterFrom="opacity-0"
	enterTo="opacity-100"
	leave="ease-in-out duration-500"
	leaveFrom="opacity-100"
	leaveTo="opacity-0"
	>
	<div className="absolute left-0 top-0 -ml-8 flex pr-2 pt-4 sm:-ml-10 sm:pr-4">
	<button
	type="button"
	className="relative rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
	onClick={() => setSearch(false)}
	>
	<span className="absolute -inset-2.5" />
	<span className="sr-only">Close panel</span>
	<XMarkIcon className="h-6 w-6" aria-hidden="true" />
	</button>
	</div>
	</Transition.Child>
	<div className="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl">
	<div className="px-4 sm:px-6">
	<Dialog.Title className="text-base font-semibold leading-6 text-gray-900">
	Search 🔎️
	</Dialog.Title>
	</div>
	<div className="relative mt-6 flex-1 px-4 sm:px-6">
	<div className="relative">
	<input
	type="text"
	className="border border-gray-300 rounded-md py-2 px-3 pr-10 placeholder-gray-400 focus:outline-none focus:ring focus:ring-green-400 text-gray-900"
	placeholder="Search for products"
	value={searchQuery}
	style={{ width: '100%' }}
	onChange={handleSearchInputChange}
	/>
	<button
	onClick={handleSearchSubmit}
	className="absolute inset-y-0 right-0 flex items-center px-4 bg-green-600 text-white rounded-r-md hover:bg-green-700 focus:outline-none focus:ring focus:ring-green-400"
	>
	Search
	</button>
	</div>
	<div className="mt-8">
	{noResults ? (
	<div className="text-gray-700">No results found.</div>
	) : (
	<ul>
	{searchResults.map((product) => (
	<li key={product.id} className="flex py-6">
	<div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
	<img
	src={product.images[1]}
	alt={product.images[1]}
	className="h-full w-full object-cover object-center"
	/>
	</div>
	<div className="ml-4 flex flex-1 flex-col">
	<div>
	<div className="flex justify-between text-base font-medium text-gray-900">
	<h3>
	<Link onClick={() => router.push(`/product/${product._id}`)}>{product.name}</Link>
	</h3>
	<p className="ml-4">₹{product.price}</p>
	</div>
	<p className="text-gray-700">
	{product.description ? product.description.slice(0, 50) + "...." : "No description"}
	</p>
	</div>
	<div className="flex flex-1 items-end justify-between text-sm">
	<button className="font-medium text-blue-500 hover:text-blue-600" onClick={() => router.push(`/product/${product._id}`)}>
	View
	</button>


	</div>
	</div>
	</li>
	))}
	</ul>
	)}
	</div>
	</div>
	</div>
	</Dialog.Panel>
	</Transition.Child>
	</div>
	</div>
	</div>
	</Dialog>
	</Transition.Root>
	</div>
	)
	}