From 28d3f68b1bf79133a1ae75bbfe395d43a464a25e Mon Sep 17 00:00:00 2001
From: dm <dm@dariuszm.eu>
Date: Mon, 24 Nov 2025 08:52:02 +0100
Subject: [PATCH] =?UTF-8?q?Poprawka=20w=20url,=20pierwsza=20wersja=20boxa?=
 =?UTF-8?q?=20z=20list=C4=85=20miejscowo=C5=9Bci?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/maps/CitiesList.astro | 46 ++++++++++++++++++++++++++++
 src/pages/mapa-zasiegu/index.astro   |  5 ++-
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/components/maps/CitiesList.astro

diff --git a/src/components/maps/CitiesList.astro b/src/components/maps/CitiesList.astro
new file mode 100644
index 0000000..8bf8d07
--- /dev/null
+++ b/src/components/maps/CitiesList.astro
@@ -0,0 +1,46 @@
+---
+const { cities = [] } = Astro.props;
+
+// sortujemy alfabetycznie
+const sorted = cities.sort((a: string, b: any) => a.localeCompare(b, "pl"));
+---
+
+<div class="fuz-">
+  <h4 class="fuz-cities-title">Miejscowości w zasięgu sieci światłowodowej lub radiowej</h4>
+
+  <div class="fuz-cities-grid">
+    {sorted.map((city: unknown) => (
+      <span class="fuz-city-item">{city}</span>
+    ))}
+  </div>
+</div>
+
+<style>
+  .fuz-cities-box {
+    margin-top: 20px;
+    background: var(--fuz-bg);
+    color: var(--fuz-text);
+    border: 1px solid var(--fuz-border, #ddd);
+    padding: 16px;
+    border-radius: 12px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
+  }
+
+  .fuz-cities-title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin-bottom: 12px;
+  }
+
+  .fuz-cities-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+    gap: 6px 14px;
+    font-size: 0.95rem;
+    line-height: 1.4;
+  }
+
+  .fuz-city-item {
+    color: var(--fuz-text);
+  }
+</style>
diff --git a/src/pages/mapa-zasiegu/index.astro b/src/pages/mapa-zasiegu/index.astro
index a706ac9..28cb054 100644
--- a/src/pages/mapa-zasiegu/index.astro
+++ b/src/pages/mapa-zasiegu/index.astro
@@ -3,13 +3,15 @@ import DefaultLayout from "../../layouts/DefaultLayout.astro";
 import MapGoogle from "../../components/maps/MapGoogle.astro";
 import MapRangeSwitch from "../../islands/MapRangeSwitch.jsx";
 import RangeForm from "../../islands/RangeForm.jsx";
+import CitiesList from "../../components/maps/CitiesList.astro";
+
 import "../../styles/map-google.css";
 
 const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
 const lat = 52.597388;
 const lon = 21.456797;
 const mapStyleId = "8e0a97af9476f2d3";
-const res = await fetch(Astro.url.origin + "/api/all-cities");
+const res = await fetch(new URL("/api/all-cities", Astro.url));
 const cities = await res.json();
 ---
 
@@ -59,6 +61,7 @@ const cities = await res.json();
     </div>
   </section>
 
+  <!-- <CitiesList cities={cities} /> -->
   <!-- ===================================================== -->
   <!-- WARSTWY KML -->
   <!-- ===================================================== -->