Skip to content

Instantly share code, notes, and snippets.

@Clever-Shivanshu

Clever-Shivanshu/Layout.js

Created November 8, 2023 08:12
Show Gist options
  • Save Clever-Shivanshu/541a772bec19cd6e21e911a079ccd4f2 to your computer and use it in GitHub Desktop.
Save Clever-Shivanshu/541a772bec19cd6e21e911a079ccd4f2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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:[email protected]" },
];
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:[email protected]"
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>
</>
);
}
Raw
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>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment