From 4192cc1b5d1e2951963457516de0f9fe668c3b9a Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <94913521+arielcostas@users.noreply.github.com>
Date: Mon, 3 Mar 2025 19:13:53 +0100
Subject: Improve more the UI

---
 src/pages/StopList.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

(limited to 'src/pages/StopList.tsx')

diff --git a/src/pages/StopList.tsx b/src/pages/StopList.tsx
index 2351b51..72cccda 100644
--- a/src/pages/StopList.tsx
+++ b/src/pages/StopList.tsx
@@ -5,6 +5,18 @@ import Fuse from "fuse.js";
 
 const sdp = new StopDataProvider();
 
+const placeholders = [
+  "Urzaiz",
+  "Gran Vía",
+  "Castelao",
+  "García Barbón",
+  "Valladares",
+  "Florida",
+  "Pizarro",
+  "Estrada Madrid",
+  "Sanjurjo Badía"
+];
+
 export function StopList() {
 	const [data, setData] = useState<Stop[] | null>(null)
 	const [searchResults, setSearchResults] = useState<Stop[] | null>(null);
@@ -36,6 +48,8 @@ export function StopList() {
 
 	if (data === null) return <h1 className="page-title">Loading...</h1>
 
+	const randomPlaceholder = placeholders[Math.floor(Math.random() * placeholders.length)];
+
 	return (
 		<div className="page-container">
 			<h1 className="page-title">UrbanoVigo Web</h1>
@@ -43,9 +57,9 @@ export function StopList() {
 			<form className="search-form">
 				<div className="form-group">
 					<label className="form-label" htmlFor="stopName">
-						Nombre de la parada
+						Buscar paradas
 					</label>
-					<input className="form-input" type="text" placeholder="Nombre de la parada" id="stopName" onChange={handleStopSearch} />
+					<input className="form-input" type="text" placeholder={randomPlaceholder} id="stopName" onChange={handleStopSearch} />
 				</div>
 			</form>
 
-- 
cgit v1.3