implemented typeahead

front/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

front/package.json

@@ -10,7 +10,8 @@
     "@fontsource/nunito-sans": "^5.2.7",
     "@tailwindcss/postcss": "^4.1.17",
     "d3": "^7.9.0",
-    "next": "^15.4.1",
+    "downshift": "^9.2.0",
+    "next": "^16.1.6",
     "postcss": "^8.5.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

front/src/app/page.tsx

@@ -1,43 +1,8 @@
+import { EmbalseSearch } from "@/pods/embalse-search";
 import Link from "next/link";
 
 const RootPage = () => {
-  return (
-    <div className="relative flex flex-1 flex-col overflow-hidden p-8">
-      <div className="absolute inset-0 bg-[url('/images/embalse-generico.jpg')] bg-cover bg-center p-8 opacity-40"></div>
-      <div className="flex grow flex-col items-center justify-center">
-        <div className="bg-base-100 absolute flex max-w-10/12 flex-col gap-8 rounded-xl p-8 shadow-lg">
-          <div className="text-center">
-            <h2 className="font-bold">Embalses</h2>
-          </div>
-
-          <div className="flex flex-col gap-4">
-            <label className="input input-bordered flex w-full items-center gap-2">
-              <input type="text" placeholder="La tolba" className="grow" />
-
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 16 16"
-                fill="currentColor"
-                className="h-6 w-6 opacity-70"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </label>
-            <div>
-              <p className="text-sm">
-                Encuentra toda la información disponible de los embalses de
-                España
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+  return <EmbalseSearch />;
 };
 
 export default RootPage;

front/src/common/models/index.ts

@@ -1,2 +1 @@
 export * from "./lookup.model";
-export * from "./reservoir.model";

front/src/pods/embalse-search/api/api.model.ts

@@ -0,0 +1,5 @@
+export interface Embalse {
+  _id: string;
+  name: string;
+  province: string;
+}

front/src/pods/embalse-search/api/embalse-search.mock.ts

@@ -0,0 +1,239 @@
+import { Embalse } from "./api.model";
+
+export const embalseSearchMock: Embalse[] = [
+  {
+    _id: "alarcón",
+    name: "Embalse de Alarcón",
+    province: "Cuenca",
+  },
+  {
+    _id: "la-serena",
+    name: "Embalse de La Serena",
+    province: "Badajoz",
+  },
+  {
+    _id: "alcántara",
+    name: "Embalse de Alcántara",
+    province: "Cáceres",
+  },
+  {
+    _id: "buendía",
+    name: "Embalse de Buendía",
+    province: "Guadalajara",
+  },
+  {
+    _id: "entrepeñas",
+    name: "Embalse de Entrepeñas",
+    province: "Guadalajara",
+  },
+  {
+    _id: "yesa",
+    name: "Embalse de Yesa",
+    province: "Navarra",
+  },
+  {
+    _id: "mequinenza",
+    name: "Embalse de Mequinenza",
+    province: "Zaragoza",
+  },
+  {
+    _id: "mediano",
+    name: "Embalse de Mediano",
+    province: "Huesca",
+  },
+  {
+    _id: "el-grado",
+    name: "Embalse de El Grado",
+    province: "Huesca",
+  },
+  {
+    _id: "la-tranquera",
+    name: "Embalse de La Tranquera",
+    province: "Zaragoza",
+  },
+  {
+    _id: "santillana",
+    name: "Embalse de Santillana",
+    province: "Madrid",
+  },
+  {
+    _id: "valmayor",
+    name: "Embalse de Valmayor",
+    province: "Madrid",
+  },
+  {
+    _id: "el-atazar",
+    name: "Embalse de El Atazar",
+    province: "Madrid",
+  },
+  {
+    _id: "san-juan",
+    name: "Embalse de San Juan",
+    province: "Madrid",
+  },
+  {
+    _id: "navacerrada",
+    name: "Embalse de Navacerrada",
+    province: "Madrid",
+  },
+  {
+    _id: "iznájar",
+    name: "Embalse de Iznájar",
+    province: "Córdoba",
+  },
+  {
+    _id: "la-viñuela",
+    name: "Embalse de La Viñuela",
+    province: "Málaga",
+  },
+  {
+    _id: "conde-de-guadalhorce",
+    name: "Embalse de Conde de Guadalhorce",
+    province: "Málaga",
+  },
+  {
+    _id: "guadalteba",
+    name: "Embalse de Guadalteba",
+    province: "Málaga",
+  },
+  {
+    _id: "la-colada",
+    name: "Embalse de La Colada",
+    province: "Córdoba",
+  },
+  {
+    _id: "la-breña",
+    name: "Embalse de La Breña",
+    province: "Córdoba",
+  },
+  {
+    _id: "guadalcacín",
+    name: "Embalse de Guadalcacín",
+    province: "Cádiz",
+  },
+  {
+    _id: "zahara",
+    name: "Embalse de Zahara",
+    province: "Cádiz",
+  },
+  {
+    _id: "bembézar",
+    name: "Embalse de Bembézar",
+    province: "Córdoba",
+  },
+  {
+    _id: "negratín",
+    name: "Embalse de Negratín",
+    province: "Granada",
+  },
+  {
+    _id: "canales",
+    name: "Embalse de Canales",
+    province: "Granada",
+  },
+  {
+    _id: "los-bermejales",
+    name: "Embalse de Los Bermejales",
+    province: "Granada",
+  },
+  {
+    _id: "cubillas",
+    name: "Embalse de Cubillas",
+    province: "Granada",
+  },
+  {
+    _id: "rules",
+    name: "Embalse de Rules",
+    province: "Granada",
+  },
+  {
+    _id: "el-gergal",
+    name: "Embalse de El Gergal",
+    province: "Sevilla",
+  },
+  {
+    _id: "melonares",
+    name: "Embalse de Melonares",
+    province: "Sevilla",
+  },
+  {
+    _id: "el-pintado",
+    name: "Embalse de El Pintado",
+    province: "Sevilla",
+  },
+  {
+    _id: "la-minilla",
+    name: "Embalse de La Minilla",
+    province: "Sevilla",
+  },
+  {
+    _id: "aracena",
+    name: "Embalse de Aracena",
+    province: "Huelva",
+  },
+  {
+    _id: "andévalo",
+    name: "Embalse de Andévalo",
+    province: "Huelva",
+  },
+  {
+    _id: "chanza",
+    name: "Embalse de Chanza",
+    province: "Huelva",
+  },
+  {
+    _id: "el-encinarejo",
+    name: "Embalse de El Encinarejo",
+    province: "Jaén",
+  },
+  {
+    _id: "el-rumblar",
+    name: "Embalse de El Rumblar",
+    province: "Jaén",
+  },
+  {
+    _id: "el-tranco",
+    name: "Embalse de El Tranco",
+    province: "Jaén",
+  },
+  {
+    _id: "giribaile",
+    name: "Embalse de Giribaile",
+    province: "Jaén",
+  },
+  {
+    _id: "guadalmena",
+    name: "Embalse de Guadalmena",
+    province: "Jaén",
+  },
+  {
+    _id: "la-bolera",
+    name: "Embalse de La Bolera",
+    province: "Jaén",
+  },
+  {
+    _id: "tous",
+    name: "Embalse de Tous",
+    province: "Valencia",
+  },
+  {
+    _id: "benagéber",
+    name: "Embalse de Benagéber",
+    province: "Valencia",
+  },
+  {
+    _id: "orellana",
+    name: "Embalse de Orellana",
+    province: "Badajoz",
+  },
+  {
+    _id: "cíjara",
+    name: "Embalse de Cíjara",
+    province: "Badajoz",
+  },
+  {
+    _id: "zújar",
+    name: "Embalse de Zújar",
+    province: "Badajoz",
+  },
+];

front/src/pods/embalse-search/api/embalse.api.ts

@@ -0,0 +1,6 @@
+import { Embalse } from "./api.model";
+import { embalseSearchMock } from "./embalse-search.mock";
+
+export const getEmbalsesCollection = async (): Promise<Embalse[]> => {
+  return embalseSearchMock;
+};

front/src/pods/embalse-search/api/index.ts

@@ -0,0 +1,3 @@
+export * from "./api.model";
+export * from "./embalse.api";
+export * from "./embalse-search.mock";

front/src/pods/embalse-search/components/search-icon.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export const SearchIcon: React.FC = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      className="h-6 w-6 opacity-70"
+    >
+      <path
+        fillRule="evenodd"
+        d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};

front/src/pods/embalse-search/embalse-search.model.ts

@@ -0,0 +1,4 @@
+export interface EmbalseSearchModel {
+  slug: string; // embalse id used in the URL
+  name: string; // Combination of name (province)
+}