223 lines
12 KiB
React
223 lines
12 KiB
React
|
import React, { useState, useEffect, useRef } from "react";
|
||
|
|
import { useDispatch } from "react-redux";
|
||
|
|
import { useNavigate } from "react-router-dom";
|
||
|
|
import { CiSearch } from "react-icons/ci";
|
||
|
|
import { IoIosTrendingUp } from "react-icons/io";
|
||
|
|
import { changeSearchText } from "../../../Features/SearchBox/Search";
|
||
|
|
import "../../../Styles/Components/PozoPublicSearch.scss";
|
||
|
|
const subDirectory = import.meta.env.BASE_URL;
|
||
|
|
|
||
|
|
const PozoPublicSearch = () => {
|
||
|
|
const navigateTo = useNavigate();
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
const [dynamicPlaceholder, setDynamicPlaceholder] = useState("");
|
||
|
|
const [animate, setAnimate] = useState(false);
|
||
|
|
const [inputValue, setInputValue] = useState("");
|
||
|
|
const [isSearchCtnrVisible, setIsSearchCtnrVisible] = useState(false);
|
||
|
|
const [isAnimating, setIsAnimating] = useState(false);
|
||
|
|
const staticPlaceholder = "Search";
|
||
|
|
const placeholders = [
|
||
|
|
"Cake, Puff and more...",
|
||
|
|
"your favorite dessert...",
|
||
|
|
"delicious treats...",
|
||
|
|
];
|
||
|
|
const containerRef = useRef(null);
|
||
|
|
let currentIndex = 0;
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const cyclePlaceholders = () => {
|
||
|
|
if (inputValue === "") {
|
||
|
|
setAnimate(true); // Trigger animation
|
||
|
|
setTimeout(() => {
|
||
|
|
setDynamicPlaceholder(placeholders[currentIndex]);
|
||
|
|
currentIndex = (currentIndex + 1) % placeholders.length;
|
||
|
|
setAnimate(false); // Reset animation
|
||
|
|
}, 1000); // Match this with the duration of the animation (1s)
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
cyclePlaceholders(); // Set initial placeholder
|
||
|
|
const interval = setInterval(cyclePlaceholders, 3000); // Change every 3 seconds
|
||
|
|
|
||
|
|
dispatch(changeSearchText(inputValue));
|
||
|
|
if (inputValue?.length > 0) {
|
||
|
|
setIsSearchCtnrVisible(false);
|
||
|
|
}
|
||
|
|
|
||
|
|
return () => clearInterval(interval);
|
||
|
|
}, [inputValue]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
document.addEventListener("mousedown", handleClickOutside);
|
||
|
|
return () => {
|
||
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleInputChange = (event) => {
|
||
|
|
setInputValue(event.target.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleInputClick = () => {
|
||
|
|
setIsSearchCtnrVisible(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleClickOutside = (event) => {
|
||
|
|
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
||
|
|
setIsSearchCtnrVisible(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const clearInput = () => {
|
||
|
|
setInputValue("");
|
||
|
|
};
|
||
|
|
|
||
|
|
const SearchBoxDataSearched = [
|
||
|
|
{
|
||
|
|
category: "Sweets,Snaks & Baked Items",
|
||
|
|
link: "https://img.freepik.com/free-photo/chocolate-cake-with-chocolate-sprinkles_144627-8998.jpg?t=st=1720691493~exp=1720695093~hmac=47c6f6fa8b66e399767ee94a7829ed3f1f833806d19d6a1be3cc1242ecb20fcd&w=740",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
category: "Tiffen,Lunch & Dinner",
|
||
|
|
link: "https://img.freepik.com/free-photo/spaghetti-with-vegetablesbroccolitomatoespeppers-isolated-white-background_123827-21227.jpg?t=st=1720692563~exp=1720696163~hmac=aaa7a33104a5a8cb247738e93e0e61e1a0bb6d05850644c2703f54230ff3c00c&w=740",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
category: "Samert TV's",
|
||
|
|
link: "https://img.freepik.com/premium-vector/realistic-curved-monitor-screen-isolated_92218-10.jpg?w=740",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
category: "Men, Women & Child Cloths",
|
||
|
|
link: "https://img.freepik.com/free-photo/blue-t-shirt_125540-727.jpg?t=st=1720692403~exp=1720696003~hmac=eb210324da3b78cb5562b5369f921eb21658f317be52c3360c5e98f03b8654ee&w=996",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
category: "Premium Soundbars",
|
||
|
|
link: "data:image/jpeg;base64,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
|
||
|
|
},
|
||
|
|
{
|
||
|
|
category: "Medical & Pharma Equipment",
|
||
|
|
link: "https://img.freepik.com/premium-photo/many-colored-pills-white_178193-216.jpg?w=740",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const SearchBoxDataBooking = [
|
||
|
|
{
|
||
|
|
category: "Parking Lot's",
|
||
|
|
link: "https://as2.ftcdn.net/v2/jpg/05/46/25/95/1000_F_546259563_GKZ3MCyZwpSwXHqCVn1CkoWM5ZGtmoWc.jpg",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
category: "Boating",
|
||
|
|
link: "https://t3.ftcdn.net/jpg/08/65/04/86/240_F_865048620_vJ7vHsmLs80MZialWslhZphKOikTMQls.jpg",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
category: "Parlour",
|
||
|
|
link: "https://img.freepik.com/free-vector/bag-with-cosmetics-realistic-composition-with-isolated-image-open-vanity-case-with-brushes-lipstick-illustration_1284-57081.jpg?uid=R155407159&ga=GA1.1.1582138690.1720691313&semt=ais_user",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
// console.log("GIIIII", isSearchCtnrVisible, isAnimating);
|
||
|
|
return (
|
||
|
|
<div className="PozoPublicSearch">
|
||
|
|
<div
|
||
|
|
className="search-container"
|
||
|
|
style={{ position: "relative" }}
|
||
|
|
ref={containerRef}>
|
||
|
|
<div>
|
||
|
|
<CiSearch
|
||
|
|
style={{
|
||
|
|
fontSize: "23px",
|
||
|
|
fontWeight: "400",
|
||
|
|
cursor: "pointer",
|
||
|
|
color: "#616161",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id="search-input"
|
||
|
|
placeholder={`${staticPlaceholder} ${dynamicPlaceholder}`}
|
||
|
|
value={inputValue}
|
||
|
|
onChange={handleInputChange}
|
||
|
|
onClick={handleInputClick}
|
||
|
|
style={{ fontSize: "15px" }}
|
||
|
|
className={animate ? "up-down-placeholder" : ""}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{inputValue && (
|
||
|
|
<span
|
||
|
|
onClick={clearInput}
|
||
|
|
style={{
|
||
|
|
position: "absolute",
|
||
|
|
right: "50px",
|
||
|
|
top: "50%",
|
||
|
|
transform: "translateY(-50%)",
|
||
|
|
cursor: "pointer",
|
||
|
|
display: "inline",
|
||
|
|
}}>
|
||
|
|
✕
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{(isSearchCtnrVisible || isAnimating) && (
|
||
|
|
<div
|
||
|
|
className={`SearchDrpctnr ${isSearchCtnrVisible ? "enter" : "exit"
|
||
|
|
}`}>
|
||
|
|
<div className="Search-Drpdwn-Dtilbox">
|
||
|
|
<div className="Search-Drpdwn-Dtilbox-HeaderDiv">
|
||
|
|
<div>
|
||
|
|
<div>Most Searched And Bought</div>
|
||
|
|
<div>
|
||
|
|
{SearchBoxDataSearched.map((item) => {
|
||
|
|
return (
|
||
|
|
<div className="default-Searched-Cards">
|
||
|
|
<img src={item.link} alt={item.category} />
|
||
|
|
<div>{item.category}</div>{" "}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div>Booking</div>
|
||
|
|
<div>
|
||
|
|
{SearchBoxDataBooking.map((item) => {
|
||
|
|
return (
|
||
|
|
<div className="default-Searched-Cards">
|
||
|
|
<img src={item.link} alt={item.category} />
|
||
|
|
<div>{item.category}</div>{" "}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="Search-Drpdwn-Dtilbox-FooterDiv">
|
||
|
|
<div>
|
||
|
|
<div>#Trending Searches</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div>
|
||
|
|
<IoIosTrendingUp
|
||
|
|
size={20}
|
||
|
|
style={{ paddingBottom: "2px" }}
|
||
|
|
/>
|
||
|
|
BOAT Airdropes 141
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<IoIosTrendingUp
|
||
|
|
size={20}
|
||
|
|
style={{ paddingBottom: "2px" }}
|
||
|
|
/>
|
||
|
|
VU 43inch Smart Tv
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default PozoPublicSearch;
|