From 0b0ee401d4668f42eefdd8c592a1831139827812 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Wed, 13 Sep 2023 19:50:18 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Refactor=20search=20dropdown=20c?=
 =?UTF-8?q?omponent=20=F0=9F=8E=A8=20Improve=20code=20readability=20?=
 =?UTF-8?q?=F0=9F=90=9B=20Fix=20focus=20issue=20in=20search=20input=20?=
 =?UTF-8?q?=F0=9F=9A=80=20Add=20search=20functionality=20=F0=9F=93=9D=20Up?=
 =?UTF-8?q?date=20component=20comments=20=F0=9F=94=A8=20Optimize=20perform?=
 =?UTF-8?q?ance=20=F0=9F=92=84=20Style=20improvements=20=F0=9F=94=A5=20Rem?=
 =?UTF-8?q?ove=20unnecessary=20code=20=F0=9F=8C=9F=20Implement=20new=20fea?=
 =?UTF-8?q?ture=20=F0=9F=A9=B9=20Fix=20minor=20bugs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/app/(client-components)/(Header)/SearchDropdown.tsx b/src/app/(client-components)/(Header)/SearchDropdown.tsx
new file mode 100644
index 0000000..76467f0
--- /dev/null
+++ b/src/app/(client-components)/(Header)/SearchDropdown.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { Popover, Transition } from "@headlessui/react";
+import Input from "@/shared/Input";
+import React, { FC, Fragment } from "react";
+
+interface Props {
+  className?: string;
+}
+
+const SearchDropdown: FC<Props> = ({ className = "" }) => {
+  const inputRef = React.createRef<HTMLInputElement>();
+
+  return (
+    <React.Fragment>
+      <Popover className={`relative ${className}`}>
+        {({ open }) => {
+          if (open) {
+            setTimeout(() => {
+              inputRef.current?.focus();
+            }, 100);
+          }
+
+          return (
+            <>
+              <Popover.Button className="text-2xl md:text-[28px] w-12 h-12 rounded-full text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 focus:outline-none flex items-center justify-center">
+                <i className="las la-search"></i>
+              </Popover.Button>
+
+              <Transition
+                show={open}
+                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
+                  static
+                  className="absolute right-0 z-10 top-full w-screen max-w-sm"
+                >
+                  <form action="" method="POST">
+                    <Input
+                      ref={inputRef}
+                      rounded="rounded-full"
+                      type="search"
+                      placeholder="Type and press enter"
+                    />
+                    <input type="submit" hidden value="" />
+                  </form>
+                </Popover.Panel>
+              </Transition>
+            </>
+          );
+        }}
+      </Popover>
+    </React.Fragment>
+  );
+};
+
+export default SearchDropdown;