Add dynamic and engaging search bar placeholders

Enhance search bar experience with 15 dynamic placeholders for the movie web app. Provides a mix of engaging questions and suggestions, promoting user interaction and a personalized feel. Shuffled for a random appearance, contributing to a more dynamic user experience.
This commit is contained in:
Vijay 2024-02-17 23:31:55 +05:30
parent 90d8d2428f
commit f5c1d6eb86
2 changed files with 22 additions and 3 deletions

View File

@ -116,7 +116,26 @@
"failed": "Failed to find media, try again!",
"loading": "Loading...",
"noResults": "We couldn't find anything!",
"placeholder": "What do you want to watch?",
"placeholder": {
"default": "What do you want to watch?",
"extra": [
"What's on your movie radar today?",
"What's your cinematic preference today?",
"What kind of entertainment are you seeking?",
"What's your ideal movie or series right now?",
"What do you want to explore in the film world?",
"What's on your watchlist for today?",
"What movie or series piques your interest?",
"What's your desired film experience at the moment?",
"What are you in the mood to watch?",
"Looking for a classic or something new?",
"Any specific mood you're in for your watch?",
"In the mood for a thrilling adventure or a cozy drama?",
"Searching for your favorite entertainment?",
"Interested in recent releases or timeless classics?",
"Prefer a short movie night or a binge-watching session?"
]
},
"sectionTitle": "Search results"
},
"titles": {

View File

@ -54,7 +54,7 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
const time = getTimeOfDay(new Date());
const title = randomT(`home.titles.${time}`);
const placeholder = randomT(`home.search.placeholder`);
const inputRef = useRef<HTMLInputElement>(null);
useSlashFocus(inputRef);
@ -77,7 +77,7 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
onChange={setSearch}
value={search}
onUnFocus={setSearchUnFocus}
placeholder={t("home.search.placeholder") ?? ""}
placeholder={placeholder ?? ""}
/>
</Sticky>
</div>