This commit is contained in:
Your Name
parent
3e34dbde20
commit
1b52075561
|
|
@ -72,6 +72,8 @@ export default function MapView({
|
|||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState("");
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
const bottomCategories = FILTER_CATEGORY_MAP[mainFilter] || ["All"];
|
||||
|
||||
/* SW_SUBCAT_ICONS:BEGIN */
|
||||
|
|
@ -222,8 +224,15 @@ setIsCreating(true);
|
|||
setDraftCoords(null);
|
||||
};
|
||||
|
||||
const handleSearchClick = () => {
|
||||
alert("🔍 Search feature coming soon!");
|
||||
const handleSearchSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
const q = (searchQuery || "").trim();
|
||||
if (!q) return;
|
||||
alert(`🔍 Search: ${q} (coming soon!)`);
|
||||
};
|
||||
|
||||
const handleClearSearch = () => {
|
||||
setSearchQuery("");
|
||||
};
|
||||
|
||||
const handleSubmitPost = async () => {
|
||||
|
|
@ -330,9 +339,31 @@ const authorName = (username || "").trim() || "anon";
|
|||
{status && <div className="map-status">{status}</div>}
|
||||
|
||||
<div className="map-overlay map-overlay-top">
|
||||
<button className="chip-pill" onClick={handleSearchClick}>
|
||||
Look at…
|
||||
<form className="sw-searchbar" onSubmit={handleSearchSubmit} role="search" aria-label="Search">
|
||||
<i className="fa-solid fa-magnifying-glass sw-search-icon" />
|
||||
<input
|
||||
className="sw-search-input"
|
||||
type="search"
|
||||
placeholder="Look at… (city, topic, @user)"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
autoCapitalize="none"
|
||||
autoCorrect="off"
|
||||
spellCheck={false}
|
||||
/>
|
||||
{searchQuery ? (
|
||||
<button
|
||||
type="button"
|
||||
className="sw-search-clear"
|
||||
onClick={handleClearSearch}
|
||||
aria-label="Clear search"
|
||||
title="Clear"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
) : null}
|
||||
</form>
|
||||
|
||||
<button className="chip-pill" onClick={handleOpenCreate}>
|
||||
Place your wire
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@
|
|||
.map-overlay-top {
|
||||
top: .7rem; left:50%; transform:translateX(-50%);
|
||||
display:flex; gap:.6rem; align-items:center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
max-width: min(980px, calc(100vw - 24px));
|
||||
}
|
||||
|
||||
.map-overlay-left {
|
||||
|
|
@ -76,3 +79,88 @@
|
|||
cursor: pointer;
|
||||
box-shadow: 0 5px 12px rgba(0,0,0,.7), 0 0 12px rgba(56,189,248,.35);
|
||||
}
|
||||
|
||||
|
||||
/* SW_SEARCHBAR:BEGIN */
|
||||
.sw-searchbar{
|
||||
pointer-events: auto;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap: .55rem;
|
||||
padding: 0.42rem 0.70rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 23, 42, 0.92);
|
||||
border: 1px solid rgba(148, 163, 184, 0.85);
|
||||
box-shadow: 0 5px 12px rgba(0,0,0,.70), 0 0 14px rgba(56,189,248,.22);
|
||||
backdrop-filter: blur(10px);
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.sw-searchbar:focus-within{
|
||||
border-color: rgba(56,189,248,.85);
|
||||
box-shadow: 0 8px 18px rgba(0,0,0,.72), 0 0 18px rgba(56,189,248,.35);
|
||||
}
|
||||
|
||||
.sw-search-icon{
|
||||
font-size: 14px;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.sw-search-input{
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: #e5e7eb;
|
||||
font-size: 0.80rem;
|
||||
font-weight: 800;
|
||||
width: min(52vw, 360px);
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.sw-search-input::placeholder{
|
||||
color: rgba(203, 213, 225, 0.88);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.sw-search-clear{
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 999px;
|
||||
background: rgba(2,6,23,.35);
|
||||
border: 1px solid rgba(148,163,184,.35);
|
||||
color: #e5e7eb;
|
||||
font-weight: 900;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
}
|
||||
|
||||
.sw-search-clear:active{ transform: scale(0.97); }
|
||||
|
||||
/* Light theme */
|
||||
body[data-theme="light"] .sw-searchbar{
|
||||
background: rgba(255,255,255,0.92);
|
||||
border-color: rgba(148, 163, 184, 0.85);
|
||||
box-shadow: 0 8px 18px rgba(0,0,0,.10);
|
||||
}
|
||||
body[data-theme="light"] .sw-search-input{
|
||||
color:#0B1220;
|
||||
}
|
||||
body[data-theme="light"] .sw-search-input::placeholder{
|
||||
color: rgba(91, 103, 122, 0.92);
|
||||
}
|
||||
body[data-theme="light"] .sw-search-clear{
|
||||
background: rgba(255,255,255,.85);
|
||||
color:#0B1220;
|
||||
border-color: rgba(148,163,184,.55);
|
||||
}
|
||||
|
||||
/* Tight phones: keep it clean */
|
||||
@media (max-width: 420px){
|
||||
.sw-search-input{
|
||||
width: min(72vw, 320px);
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
/* SW_SEARCHBAR:END */
|
||||
|
|
|
|||
Loading…
Reference in New Issue