File size: 3,092 Bytes
f817b5c d16e0f2 f817b5c 5c1d548 f817b5c 430cd22 5c1d548 f817b5c d16e0f2 f817b5c d355ffc d16e0f2 5c1d548 d16e0f2 f817b5c d16e0f2 d355ffc f817b5c d16e0f2 d355ffc d16e0f2 d355ffc f817b5c d355ffc f817b5c d16e0f2 f817b5c d16e0f2 430cd22 f817b5c d355ffc f817b5c d16e0f2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
import React, { useState, useEffect } from "react";
const SearchBar = ({ onSearch }) => {
const [query, setQuery] = useState("");
const [placeholderIndex, setPlaceholderIndex] = useState(0);
const [placeholder, setPlaceholder] = useState("");
const [showInitialPlaceholder, setShowInitialPlaceholder] = useState(true);
const initialPlaceholder = "Discover thousands of spaces";
const placeholders = [
"Generate music",
"Remove background from images",
"Translate text",
"Chat with a PDF file",
"Generate anime images",
"Recognize objects in images",
"Perform sentiment analysis",
"Help me pick a laptop",
"Face recognition",
"Drawing canvas",
"Create 3D objects from images",
"Play a text-based game",
"Predict stock prices",
"Recommend movies",
"Image classification",
"Summarize text",
"Generate video from text and audio",
"Help me organize a trip",
"Write a children's story",
"Chat with a cat",
];
useEffect(() => {
const initialTimeout = setTimeout(() => {
setShowInitialPlaceholder(false);
}, 4000);
return () => clearTimeout(initialTimeout);
}, []);
useEffect(() => {
if (!showInitialPlaceholder && query === "") {
let typingInterval;
if (placeholder.length < placeholders[placeholderIndex].length) {
const typingSpeed = Math.floor(Math.random() * 50) + 100;
typingInterval = setInterval(() => {
setPlaceholder(prevPlaceholder => prevPlaceholder + placeholders[placeholderIndex][placeholder.length]);
}, typingSpeed);
}
return () => clearInterval(typingInterval);
}
}, [placeholder, placeholderIndex, showInitialPlaceholder, query]);
useEffect(() => {
if (!showInitialPlaceholder && query === "") {
const indexInterval = setInterval(() => {
if (placeholder === placeholders[placeholderIndex]) {
setPlaceholderIndex(Math.floor(Math.random() * placeholders.length));
setPlaceholder(""); // reset the placeholder when the index changes
}
}, 1500);
return () => clearInterval(indexInterval);
}
}, [placeholder, placeholderIndex, showInitialPlaceholder, query]);
const handleKeyDown = (event) => {
if (event.key === "Enter") {
onSearch(query);
}
};
const handleChange = (e) => {
setQuery(e.target.value);
if (e.target.value === "") {
setPlaceholder("");
setPlaceholderIndex(Math.floor(Math.random() * placeholders.length));
}
};
return (
<div className="flex items-center justify-center bg-gray-900 rounded-xl shadow-sm w-full lg:w-1/2 h-12 my-8">
<input
type="text"
placeholder={showInitialPlaceholder ? initialPlaceholder : placeholder}
className="search-bar w-full h-full px-4 py-2 text-gray-200 bg-gray-800 border border-gray-700 rounded-xl shadow-sm appearance-none focus:outline-none focus:ring-2"
value={query}
onChange={handleChange}
onKeyDown={handleKeyDown}
/>
</div>
);
};
export default SearchBar; |