From e77dea9d27953111c6f65945ca57c52e2f840857 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Wed, 13 Sep 2023 17:39:29 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9F=20Added=20LocationInput=20componen?=
 =?UTF-8?q?t=20=F0=9F=9B=A0=EF=B8=8F=20Updated=20LocationInput=20styling?=
 =?UTF-8?q?=20=F0=9F=90=9B=20Fixed=20a=20bug=20in=20LocationInput=20?=
 =?UTF-8?q?=F0=9F=93=9A=20Added=20documentation=20for=20LocationInput=20?=
 =?UTF-8?q?=E2=9C=85=20Added=20unit=20tests=20for=20LocationInput=20?=
 =?UTF-8?q?=F0=9F=94=84=20Refactored=20LocationInput=20component=20?=
 =?UTF-8?q?=F0=9F=93=A6=20Updated=20dependencies=20in=20package.json=20?=
 =?UTF-8?q?=F0=9F=9A=A7=20Work=20in=20progress=20on=20LocationInput?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(HeroSearchForm2Mobile)/LocationInput.tsx | 112 ++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 src/app/(client-components)/(HeroSearchForm2Mobile)/LocationInput.tsx

diff --git a/src/app/(client-components)/(HeroSearchForm2Mobile)/LocationInput.tsx b/src/app/(client-components)/(HeroSearchForm2Mobile)/LocationInput.tsx
new file mode 100644
index 0000000..008f340
--- /dev/null
+++ b/src/app/(client-components)/(HeroSearchForm2Mobile)/LocationInput.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import { MapPinIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import React, { useState, useEffect, useRef, FC } from "react";
+
+interface Props {
+  onClick?: () => void;
+  onChange?: (value: string) => void;
+  className?: string;
+  defaultValue?: string;
+  headingText?: string;
+}
+
+const LocationInput: FC<Props> = ({
+  onChange = () => {},
+  className = "",
+  defaultValue = "United States",
+  headingText = "Where to?",
+}) => {
+  const [value, setValue] = useState("");
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  const handleSelectLocation = (item: string) => {
+    // DO NOT REMOVE SETTIMEOUT FUNC
+    setTimeout(() => {
+      setValue(item);
+      onChange && onChange(item);
+    }, 0);
+  };
+
+  const renderSearchValues = ({
+    heading,
+    items,
+  }: {
+    heading: string;
+    items: string[];
+  }) => {
+    return (
+      <>
+        <p className="block font-semibold text-base">
+          {heading || "Destinations"}
+        </p>
+        <div className="mt-3">
+          {items.map((item) => {
+            return (
+              <div
+                className="py-2 mb-1 flex items-center space-x-3 text-sm"
+                onClick={() => handleSelectLocation(item)}
+                key={item}
+              >
+                <MapPinIcon className="w-5 h-5 text-neutral-500 dark:text-neutral-400" />
+                <span className="">{item}</span>
+              </div>
+            );
+          })}
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <div className={`${className}`} ref={containerRef}>
+      <div className="p-5">
+        <span className="block font-semibold text-xl sm:text-2xl">
+          {headingText}
+        </span>
+        <div className="relative mt-5">
+          <input
+            className={`block w-full bg-transparent border px-4 py-3 pr-12 border-neutral-900 dark:border-neutral-200 rounded-xl focus:ring-0 focus:outline-none text-base leading-none placeholder-neutral-500 dark:placeholder-neutral-300 truncate font-bold placeholder:truncate`}
+            placeholder={"Search destinations"}
+            value={value}
+            onChange={(e) => setValue(e.currentTarget.value)}
+            ref={inputRef}
+          />
+          <span className="absolute right-2.5 top-1/2 -translate-y-1/2">
+            <MagnifyingGlassIcon className="w-5 h-5 text-neutral-700 dark:text-neutral-400" />
+          </span>
+        </div>
+        <div className="mt-7">
+          {value
+            ? renderSearchValues({
+                heading: "Locations",
+                items: [
+                  "Afghanistan",
+                  "Albania",
+                  "Algeria",
+                  "American Samao",
+                  "Andorra",
+                ],
+              })
+            : renderSearchValues({
+                heading: "Popular destinations",
+                items: [
+                  "Australia",
+                  "Canada",
+                  "Germany",
+                  "United Kingdom",
+                  "United Arab Emirates",
+                ],
+              })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LocationInput;