From efdaf560e789bd7b5d967683461817d93853c63d Mon Sep 17 00:00:00 2001 From: John Doe Date: Wed, 13 Sep 2023 21:08:37 +0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Implemented=20dropdown=20menu=20?= =?UTF-8?q?component=20=E2=9C=A8=20Added=20icons=20and=20transitions=20?= =?UTF-8?q?=F0=9F=94=97=20Linked=20dropdown=20items=20to=20routes=20?= =?UTF-8?q?=F0=9F=93=84=20Updated=20documentation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(Header)/DropdownTravelers.tsx | 349 ++++++++++++++++++ 1 file changed, 349 insertions(+) create mode 100644 src/app/(client-components)/(Header)/DropdownTravelers.tsx diff --git a/src/app/(client-components)/(Header)/DropdownTravelers.tsx b/src/app/(client-components)/(Header)/DropdownTravelers.tsx new file mode 100644 index 0000000..be7c522 --- /dev/null +++ b/src/app/(client-components)/(Header)/DropdownTravelers.tsx @@ -0,0 +1,349 @@ +"use client"; + +import { Popover, Transition } from "@headlessui/react"; +import { ChevronDownIcon } from "@heroicons/react/24/solid"; +import { Fragment } from "react"; +import { PathName } from "@/routers/types"; +import Link from "next/link"; + +interface SolutionItem { + name: string; + description: string; + href: PathName; + icon: any; + active?: boolean; +} + +const solutions: SolutionItem[] = [ + { + name: "Stays", + description: "Stays rental description ", + href: "/listing-stay", + active: true, + icon: IconOne, + }, + { + name: "Real Estate", + description: "Real Estate description", + href: "/listing-real-estate", + icon: IconTwo, + }, + { + name: "Cars", + description: "Car rental description", + href: "/listing-car", + icon: IconThree, + }, + { + name: "Experiences", + description: "Tour and experiences", + href: "/listing-experiences", + icon: IconFour, + }, +]; + +export default function DropdownTravelers() { + return ( + + {({ open, close }) => ( + <> + +
+ Travelers +
+ + + +
+
+ {solutions.map((item, index) => ( + close()} + className={`flex items-center p-2 -m-3 transition duration-150 ease-in-out rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-700 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50 ${ + item.active ? "bg-neutral-100 dark:bg-neutral-700" : "" + }`} + > +
+
+
+

{item.name}

+

+ {item.description} +

+
+ + ))} +
+ {/* FOOTER */} +
+ + + + Documentation + + + + Start integrating products and tools + + +
+
+ + + + )} + + ); +} + +function IconFour() { + return ( + + + + + + + + ); +} + +function IconTwo() { + return ( + + + + + + + + + + ); +} + +function IconThree() { + return ( + + + + + + + + + + + ); +} + +function IconOne() { + return ( + + + + + + + + ); +}