Browse Source

🌟 Added LocationInput component

🛠️ Updated LocationInput styling
🐛 Fixed a bug in LocationInput
📚 Added documentation for LocationInput
 Added unit tests for LocationInput
🔄 Refactored LocationInput component
📦 Updated dependencies in package.json
🚧 Work in progress on LocationInput
main
John Doe 1 year ago
parent
commit
e77dea9d27
  1. 112
      src/app/(client-components)/(HeroSearchForm2Mobile)/LocationInput.tsx

112
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;
Loading…
Cancel
Save