From 4ae77c88aa6f4fd23d682c170bac350ceed2ed0c Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Wed, 13 Sep 2023 19:48:38 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Made=20some=20improveme?=
 =?UTF-8?q?nts=20to=20the=20code=20=E2=9C=A8=20Added=20new=20features=20an?=
 =?UTF-8?q?d=20enhancements=20=F0=9F=90=9B=20Fixed=20a=20few=20bugs=20and?=
 =?UTF-8?q?=20issues=20=F0=9F=9A=80=20Ready=20to=20launch=20the=20project?=
 =?UTF-8?q?=20=F0=9F=94=A7=20Tweaked=20configurations=20and=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(Header)/TemplatesDropdown.tsx            | 89 +++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 src/app/(client-components)/(Header)/TemplatesDropdown.tsx

diff --git a/src/app/(client-components)/(Header)/TemplatesDropdown.tsx b/src/app/(client-components)/(Header)/TemplatesDropdown.tsx
new file mode 100644
index 0000000..102c81c
--- /dev/null
+++ b/src/app/(client-components)/(Header)/TemplatesDropdown.tsx
@@ -0,0 +1,89 @@
+import { Popover, Transition } from "@headlessui/react";
+import { ChevronDownIcon } from "@heroicons/react/24/solid";
+import { Fragment } from "react";
+import { NAVIGATION_DEMO_2 } from "@/data/navigation";
+import { NavItemType } from "@/shared/Navigation/NavigationItem";
+import Link from "next/link";
+import Collection from "@/components/Collection";
+
+export default function TemplatesDropdown() {
+  const renderMegaMenuNavlink = (
+    item: NavItemType,
+    index: number,
+    close: () => void
+  ) => {
+    return (
+      <li key={item.id} className={`${item.isNew ? "menuIsNew" : ""}`}>
+        <Link
+          target={item.targetBlank ? "_blank" : undefined}
+          rel="noopener noreferrer"
+          className="font-normal text-slate-600 hover:text-black dark:text-slate-400 dark:hover:text-white"
+          href={{
+            pathname: item.href || undefined,
+          }}
+          onClick={close}
+        >
+          {item.name}
+        </Link>
+      </li>
+    );
+  };
+
+  return (
+    <>
+      <Popover className="TemplatesDropdown hidden lg:block self-center">
+        {({ open, close }) => (
+          <>
+            <Popover.Button
+              className={`
+                ${open ? "" : "text-opacity-80"}
+                group h-10 sm:h-12 px-3 py-1.5 inline-flex items-center text-sm text-gray-800 dark:text-slate-300 font-medium hover:text-opacity-100 focus:outline-none `}
+            >
+              <span className="">Templates</span>
+              <ChevronDownIcon
+                className={`${open ? "-rotate-180" : ""}
+                  ml-1 h-4 w-4 transition ease-in-out duration-150 `}
+                aria-hidden="true"
+              />
+            </Popover.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel className="absolute z-20 top-full w-full inset-x-0">
+                <div className="bg-white dark:bg-neutral-900 shadow-lg">
+                  <div className="container">
+                    <div className="flex text-sm border-t border-slate-200 dark:border-slate-700 py-14">
+                      <div className="flex-1 grid grid-cols-5 gap-6 xl:gap-8 pr-6 xl:pr-8">
+                        {NAVIGATION_DEMO_2.map((item, index) => (
+                          <div key={index}>
+                            <p className="font-medium text-slate-900 dark:text-neutral-200">
+                              {item.name}
+                            </p>
+                            <ul className="grid space-y-4 mt-4">
+                              {item.children?.map((item, index) =>
+                                renderMegaMenuNavlink(item, index, close)
+                              )}
+                            </ul>
+                          </div>
+                        ))}
+                      </div>
+                      <div className="w-[35%] xl:w-[30%]">
+                        <Collection />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </>
+        )}
+      </Popover>
+    </>
+  );
+}