parks: キーワード削除と地図クリック時の行強調

キーワード欄に削除ボタンを追加。地図で公園をクリックしたときはキーワードを変えず、一覧の該当行を強調して表示するようにした。

1 files changed, 41 insertions, 1 deletions

diff --git a/src/components/ParksFilters.astro b/src/components/ParksFilters.astro
index 6ef52b5..f31503b 100644
--- a/src/components/ParksFilters.astro
+++ b/src/components/ParksFilters.astro
@@ -38,7 +38,16 @@ const facilityTypes = [
   </label>
   <label>
     <span>キーワード</span>
-    <input type="search" data-parks-search placeholder="名称・住所・設備など" />
+    <span class="parks-search-wrap">
+      <input type="search" data-parks-search placeholder="名称・住所・設備など" />
+      <button
+        type="button"
+        class="parks-search-clear"
+        data-parks-search-clear
+        aria-label="キーワードを削除"
+        title="キーワードを削除"
+        hidden>×</button>
+    </span>
   </label>
   <label class="parks-unconfirmed-filter" title="名称・住所などが未確認の公園だけを表示">
     <input type="checkbox" data-parks-unconfirmed />
@@ -182,6 +191,37 @@ const facilityTypes = [
     font-size: 0.9rem;
     opacity: 0.75;
   }
+  .parks-search-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+  .parks-search-wrap input[type="search"] {
+    padding-right: 1.9rem;
+  }
+  .parks-search-clear {
+    position: absolute;
+    right: 0.3rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.4rem;
+    height: 1.4rem;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: inherit;
+    font-size: 1rem;
+    line-height: 1;
+    cursor: pointer;
+  }
+  .parks-search-clear:hover {
+    background: var(--sl-color-gray-5, #e2e8f0);
+  }
+  .parks-search-clear[hidden] {
+    display: none;
+  }
   .parks-disclaimer {
     margin: 0 0 0.55rem;
     color: var(--sl-color-gray-2);