<!-- /docs/components/uiWidgets/CoordinateInput.md -->

# 📍 CoordinateInput.js

Die Komponente `CoordinateInput` stellt ein einfaches Eingabefeld für geografische Koordinaten (Latitude, Longitude) bereit.  
Sie dient typischerweise dazu, einen bestimmten Punkt auf der Karte zu fokussieren bzw. zu markieren.

---

## 🔧 Pfad

```bash
/components/uiWidgets/CoordinateInput.js
```

---

## 🎯 Zweck

- Eingabe von Koordinaten (z. B. `53.2,8.1`)
- Übergabe dieser Koordinaten an eine Callback-Funktion zur weiteren Verarbeitung
- Positioniert sich dauerhaft in der linken oberen Ecke der Seite (z. B. zur schnellen Navigation)

---

## ⚙️ Props

| Prop                  | Typ        | Beschreibung                                                                          |
| --------------------- | ---------- | ------------------------------------------------------------------------------------- |
| `onCoordinatesSubmit` | `function` | Wird beim Abschicken des Formulars mit dem eingegebenen Koordinaten-String aufgerufen |

---

## 🧩 Interne Logik

```js
const [coordinates, setCoordinates] = useState("");
```

- Der Eingabewert wird im lokalen State gespeichert
- Beim Submit (`onSubmit`) wird `onCoordinatesSubmit(coordinates)` aufgerufen, wenn gesetzt

---

## 🧰 UI-Aufbau

- Eingabefeld für Text: Erwartet `lat,lng`
- Button: „Zu Marker zoomen“
- Position: `fixed top-5 left-5` → dauerhaft sichtbar

---

## 🎨 Gestaltung (Tailwind CSS)

| Element   | Klassen                                                          |
| --------- | ---------------------------------------------------------------- |
| Container | `fixed top-5 left-5 z-50 bg-white shadow-lg rounded-lg p-4 w-72` |
| Input     | `border p-2 rounded w-full mb-2`                                 |
| Button    | `bg-blue-500 text-white p-2 rounded w-full hover:bg-blue-600`    |

---

## 🧪 Testfälle

| Eingabe                    | Erwartung                                                 |
| -------------------------- | --------------------------------------------------------- |
| `53.2,8.1`                 | Callback `onCoordinatesSubmit("53.2,8.1")` wird ausgelöst |
| Leer                       | Callback wird ausgelöst mit leerem String                 |
| Buttonklick                | Löst `handleSubmit()` aus                                 |
| Enter-Taste im Eingabefeld | Löst ebenfalls Submit aus                                 |

---

## 💡 Erweiterungsideen

- Validierung des Formats (`lat,lng`) vor dem Absenden
- Automatisches Zentrieren der Leaflet-Karte in der Callback-Funktion
- Optionale Markierung des Punkts auf der Karte

---

## 📄 Verwendung

Beispiel in einer Map-Komponente:

```jsx
<CoordinateInput
  onCoordinatesSubmit={(coords) => {
    const [lat, lng] = coords.split(",").map(Number);
    map.setView([lat, lng], 16); // Leaflet
  }}
/>
```

---

## 📦 Verwandte Komponenten

- `MapComponent.js` – kann die übergebenen Koordinaten zur Zentrierung oder Marker-Erstellung nutzen

---
