Skip to content

Commit aff0ec3

Browse files
tknkaatknkaa
committed
move search box out of sidebar
1 parent 2893893 commit aff0ec3

1 file changed

Lines changed: 108 additions & 125 deletions

File tree

‎src/pages/MapPage.tsx‎

Lines changed: 108 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,9 @@ export function MapPage() {
110110
.openOn(mapRef.current);
111111
}
112112
}
113+
// Reset search box to initial state
114+
setSearchQuery("");
115+
setSearchResults([]);
113116
// Close sidebar after selection
114117
setSidebarOpen(false);
115118
};
@@ -125,6 +128,111 @@ export function MapPage() {
125128
{/* Map背景 */}
126129
<div ref={containerRef} className="w-full h-full" />
127130

131+
{/* 検索ボックス（常時表示） */}
132+
<div className="fixed top-4 left-4 right-20 z-[2100] max-w-md">
133+
<div className="search-input-wrapper bg-white rounded-lg shadow-lg">
134+
<svg
135+
className="search-icon w-4 h-4"
136+
viewBox="0 0 24 24"
137+
fill="none"
138+
stroke="currentColor"
139+
strokeWidth="2"
140+
strokeLinecap="round"
141+
>
142+
<circle cx="11" cy="11" r="8" />
143+
<line x1="21" y1="21" x2="16.65" y2="16.65" />
144+
</svg>
145+
<input
146+
className="sidebar-search-input"
147+
type="text"
148+
value={searchQuery}
149+
onChange={(e) => handleSearch(e.target.value)}
150+
placeholder="建物・施設を検索"
151+
/>
152+
</div>
153+
154+
{/* 検索結果表示 */}
155+
{searchQuery && searchResults.length > 0 && (
156+
<div className="search-results max-h-96 overflow-y-auto mt-2 shadow-lg">
157+
{searchResults.map((item) => (
158+
<button
159+
key={item.id}
160+
className="search-result-item w-full text-left px-3 py-2 rounded-md hover:bg-gray-100 cursor-pointer text-sm"
161+
onClick={() => handleSelectItem(item)}
162+
>
163+
<div className="font-medium text-gray-800">{item.name}</div>
164+
{item.description && (
165+
<div className="text-xs text-gray-500 mt-0.5">
166+
{item.description}
167+
</div>
168+
)}
169+
<div className="text-xs text-gray-400 mt-0.5 flex items-center gap-1">
170+
{item.type === "building" && (
171+
<>
172+
<svg
173+
className="w-3 h-3"
174+
viewBox="0 0 24 24"
175+
fill="none"
176+
stroke="currentColor"
177+
strokeWidth="2"
178+
>
179+
<path d="M3 21h18" />
180+
<path d="M5 21V7l8-4v18" />
181+
<path d="M19 21V11l-6-4" />
182+
<path d="M9 9h1" />
183+
<path d="M9 13h1" />
184+
<path d="M9 17h1" />
185+
</svg>
186+
建物
187+
</>
188+
)}
189+
{item.type === "waterServer" && (
190+
<>
191+
<svg
192+
className="w-3 h-3"
193+
viewBox="0 0 24 24"
194+
fill="none"
195+
stroke="currentColor"
196+
strokeWidth="2"
197+
>
198+
<path d="M12 2v6" />
199+
<path d="M8 8h8" />
200+
<path d="M7 8v8a5 5 0 0 0 10 0V8z" />
201+
</svg>
202+
ウォーターサーバー
203+
</>
204+
)}
205+
{item.type === "vendingMachine" && (
206+
<>
207+
<svg
208+
className="w-3 h-3"
209+
viewBox="0 0 24 24"
210+
fill="none"
211+
stroke="currentColor"
212+
strokeWidth="2"
213+
>
214+
<rect x="4" y="2" width="16" height="20" rx="2" />
215+
<line x1="4" y1="10" x2="20" y2="10" />
216+
<rect x="7" y="4" width="4" height="4" rx="0.5" />
217+
<rect x="13" y="4" width="4" height="4" rx="0.5" />
218+
</svg>
219+
自動販売機
220+
</>
221+
)}
222+
</div>
223+
</button>
224+
))}
225+
</div>
226+
)}
227+
228+
{/* 検索結果が0件の場合 */}
229+
{searchQuery && searchResults.length === 0 && (
230+
<div className="bg-white rounded-lg shadow-lg text-center text-gray-500 text-sm py-3 mt-2">
231+
該当する結果が見つかりませんでした
232+
</div>
233+
)}
234+
</div>
235+
128236
{/* サイドバーを開くメニューボタン */}
129237
<button
130238
className="sidebar-toggle-btn"
@@ -177,131 +285,6 @@ export function MapPage() {
177285

178286
{/* コンテンツエリア */}
179287
<div className="sidebar-content">
180-
{/* 検索セクション */}
181-
<div className="sidebar-section">
182-
<div className="search-input-wrapper">
183-
<svg
184-
className="search-icon w-4 h-4"
185-
viewBox="0 0 24 24"
186-
fill="none"
187-
stroke="currentColor"
188-
strokeWidth="2"
189-
strokeLinecap="round"
190-
>
191-
<circle cx="11" cy="11" r="8" />
192-
<line x1="21" y1="21" x2="16.65" y2="16.65" />
193-
</svg>
194-
<input
195-
className="sidebar-search-input"
196-
type="text"
197-
value={searchQuery}
198-
onChange={(e) => handleSearch(e.target.value)}
199-
placeholder="建物・施設を検索"
200-
/>
201-
</div>
202-
203-
{/* 検索結果表示 */}
204-
{searchQuery && searchResults.length > 0 && (
205-
<div className="search-results max-h-48 overflow-y-auto">
206-
{searchResults.map((item) => (
207-
<button
208-
key={item.id}
209-
className="search-result-item w-full text-left px-3 py-2 rounded-md hover:bg-gray-100 cursor-pointer text-sm"
210-
onClick={() => handleSelectItem(item)}
211-
>
212-
<div className="font-medium text-gray-800">
213-
{item.name}
214-
</div>
215-
{item.description && (
216-
<div className="text-xs text-gray-500 mt-0.5">
217-
{item.description}
218-
</div>
219-
)}
220-
<div className="text-xs text-gray-400 mt-0.5 flex items-center gap-1">
221-
{item.type === "building" && (
222-
<>
223-
<svg
224-
className="w-3 h-3"
225-
viewBox="0 0 24 24"
226-
fill="none"
227-
stroke="currentColor"
228-
strokeWidth="2"
229-
>
230-
<path d="M3 21h18" />
231-
<path d="M5 21V7l8-4v18" />
232-
<path d="M19 21V11l-6-4" />
233-
<path d="M9 9h1" />
234-
<path d="M9 13h1" />
235-
<path d="M9 17h1" />
236-
</svg>
237-
建物
238-
</>
239-
)}
240-
{item.type === "waterServer" && (
241-
<>
242-
<svg
243-
className="w-3 h-3"
244-
viewBox="0 0 24 24"
245-
fill="none"
246-
stroke="currentColor"
247-
strokeWidth="2"
248-
>
249-
<path d="M12 2v6" />
250-
<path d="M8 8h8" />
251-
<path d="M7 8v8a5 5 0 0 0 10 0V8z" />
252-
</svg>
253-
ウォーターサーバー
254-
</>
255-
)}
256-
{item.type === "vendingMachine" && (
257-
<>
258-
<svg
259-
className="w-3 h-3"
260-
viewBox="0 0 24 24"
261-
fill="none"
262-
stroke="currentColor"
263-
strokeWidth="2"
264-
>
265-
<rect
266-
x="4"
267-
y="2"
268-
width="16"
269-
height="20"
270-
rx="2"
271-
/>
272-
<line x1="4" y1="10" x2="20" y2="10" />
273-
<rect
274-
x="7"
275-
y="4"
276-
width="4"
277-
height="4"
278-
rx="0.5"
279-
/>
280-
<rect
281-
x="13"
282-
y="4"
283-
width="4"
284-
height="4"
285-
rx="0.5"
286-
/>
287-
</svg>
288-
自動販売機
289-
</>
290-
)}
291-
</div>
292-
</button>
293-
))}
294-
</div>
295-
)}
296-
297-
{/* 検索結果が0件の場合 */}
298-
{searchQuery && searchResults.length === 0 && (
299-
<div className="text-center text-gray-500 text-sm py-3">
300-
該当する結果が見つかりませんでした
301-
</div>
302-
)}
303-
</div>
304-
305288
{/* 表示トグルセクション */}
306289
<div className="sidebar-section">
307290
<button

0 commit comments

Comments
 (0)