update frontend
This commit is contained in:
Your Name
parent
1565d1c72d
commit
86d6f153c6
|
|
@ -0,0 +1,206 @@
|
||||||
|
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||||
|
import { recoSearch } from "../../services/recoSearch";
|
||||||
|
import "../../styles/smartSearchBar.css";
|
||||||
|
|
||||||
|
function defaultZoomForKind(kind) {
|
||||||
|
const k = (kind || "").toLowerCase();
|
||||||
|
if (k.includes("post")) return 15;
|
||||||
|
if (k.includes("place") || k.includes("poi")) return 13;
|
||||||
|
if (k.includes("region") || k.includes("area") || k.includes("city")) return 9;
|
||||||
|
return 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
function IconPin(props) {
|
||||||
|
return (
|
||||||
|
<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" {...props}>
|
||||||
|
<path
|
||||||
|
d="M12 22s7-6.1 7-13a7 7 0 1 0-14 0c0 6.9 7 13 7 13zm0-9.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function IconWaves(props) {
|
||||||
|
return (
|
||||||
|
<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" {...props}>
|
||||||
|
<path
|
||||||
|
d="M3 10c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2 2-2 4-2v2c-2 0-2 2-4 2s-2-2-4-2-2 2-4 2-2-2-4-2-2 2-4 2V10z"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M3 14c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2 2-2 4-2v2c-2 0-2 2-4 2s-2-2-4-2-2 2-4 2-2-2-4-2-2 2-4 2v-2z"
|
||||||
|
fill="currentColor"
|
||||||
|
opacity="0.75"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Props:
|
||||||
|
* - placeholder
|
||||||
|
* - onPick(item, { zoom, reason }) // call when user selects suggestion
|
||||||
|
* - onMySpot() // keep same function (center on user)
|
||||||
|
* - onPlaceTourWire() // keep same function (place/tour/wire)
|
||||||
|
*/
|
||||||
|
export default function SmartSearchBar({
|
||||||
|
placeholder = "Search places, regions, posts…",
|
||||||
|
onPick,
|
||||||
|
onMySpot,
|
||||||
|
onPlaceTourWire,
|
||||||
|
}) {
|
||||||
|
const [q, setQ] = useState("");
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [items, setItems] = useState([]);
|
||||||
|
const [active, setActive] = useState(-1);
|
||||||
|
const [err, setErr] = useState("");
|
||||||
|
|
||||||
|
const abortRef = useRef(null);
|
||||||
|
const boxRef = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
function onDocDown(e) {
|
||||||
|
if (!boxRef.current) return;
|
||||||
|
if (!boxRef.current.contains(e.target)) setOpen(false);
|
||||||
|
}
|
||||||
|
document.addEventListener("mousedown", onDocDown);
|
||||||
|
return () => document.removeEventListener("mousedown", onDocDown);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const query = q.trim();
|
||||||
|
setErr("");
|
||||||
|
|
||||||
|
if (abortRef.current) abortRef.current.abort();
|
||||||
|
if (!query) {
|
||||||
|
setItems([]);
|
||||||
|
setLoading(false);
|
||||||
|
setActive(-1);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ctrl = new AbortController();
|
||||||
|
abortRef.current = ctrl;
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
const t = setTimeout(async () => {
|
||||||
|
try {
|
||||||
|
const res = await recoSearch(query, { signal: ctrl.signal, limit: 10 });
|
||||||
|
setItems(res);
|
||||||
|
setOpen(true);
|
||||||
|
setActive(res.length ? 0 : -1);
|
||||||
|
} catch (e) {
|
||||||
|
if (ctrl.signal.aborted) return;
|
||||||
|
setErr((e && e.message) ? e.message : "Search error");
|
||||||
|
setItems([]);
|
||||||
|
} finally {
|
||||||
|
if (!ctrl.signal.aborted) setLoading(false);
|
||||||
|
}
|
||||||
|
}, 220);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearTimeout(t);
|
||||||
|
ctrl.abort();
|
||||||
|
};
|
||||||
|
}, [q]);
|
||||||
|
|
||||||
|
const showList = open && (items.length > 0 || loading || err);
|
||||||
|
|
||||||
|
const pick = (it, reason = "click") => {
|
||||||
|
if (!it) return;
|
||||||
|
const zoom = defaultZoomForKind(it.kind);
|
||||||
|
setOpen(false);
|
||||||
|
setQ(it.title || q);
|
||||||
|
|
||||||
|
onPick && onPick(it, { zoom, reason });
|
||||||
|
};
|
||||||
|
|
||||||
|
const onKeyDown = (e) => {
|
||||||
|
if (!showList && (e.key === "ArrowDown" || e.key === "Enter")) setOpen(true);
|
||||||
|
|
||||||
|
if (e.key === "ArrowDown") {
|
||||||
|
e.preventDefault();
|
||||||
|
setActive((i) => Math.min(i + 1, items.length - 1));
|
||||||
|
} else if (e.key === "ArrowUp") {
|
||||||
|
e.preventDefault();
|
||||||
|
setActive((i) => Math.max(i - 1, 0));
|
||||||
|
} else if (e.key === "Enter") {
|
||||||
|
if (items.length && active >= 0) {
|
||||||
|
e.preventDefault();
|
||||||
|
pick(items[active], "enter");
|
||||||
|
}
|
||||||
|
} else if (e.key === "Escape") {
|
||||||
|
setOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const rightTitle = useMemo(() => {
|
||||||
|
// visuel flexible, même fonction: tu peux renommer plus tard
|
||||||
|
return "Place / Tour / Wire";
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="sw-search" ref={boxRef}>
|
||||||
|
<div className="sw-search__bar">
|
||||||
|
<input
|
||||||
|
className="sw-search__input"
|
||||||
|
value={q}
|
||||||
|
onChange={(e) => setQ(e.target.value)}
|
||||||
|
onFocus={() => setOpen(true)}
|
||||||
|
onKeyDown={onKeyDown}
|
||||||
|
placeholder={placeholder}
|
||||||
|
aria-label="Search"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="sw-search__icons" aria-label="Search actions">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="sw-search__iconBtn"
|
||||||
|
title={rightTitle}
|
||||||
|
onClick={() => onPlaceTourWire && onPlaceTourWire()}
|
||||||
|
>
|
||||||
|
<IconWaves />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="sw-search__iconBtn"
|
||||||
|
title="My spot"
|
||||||
|
onClick={() => onMySpot && onMySpot()}
|
||||||
|
>
|
||||||
|
<IconPin />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showList && (
|
||||||
|
<div className="sw-search__dropdown">
|
||||||
|
{loading && <div className="sw-search__row sw-search__muted">Searching…</div>}
|
||||||
|
{err && <div className="sw-search__row sw-search__error">{err}</div>}
|
||||||
|
|
||||||
|
{!loading && !err && items.map((it, idx) => (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
key={it.id}
|
||||||
|
className={"sw-search__row sw-search__item" + (idx === active ? " is-active" : "")}
|
||||||
|
onMouseEnter={() => setActive(idx)}
|
||||||
|
onClick={() => pick(it, "click")}
|
||||||
|
>
|
||||||
|
<div className="sw-search__title">{it.title || "Untitled"}</div>
|
||||||
|
<div className="sw-search__sub">
|
||||||
|
{(it.kind ? it.kind : "result")}
|
||||||
|
{it.subtitle ? " • " + it.subtitle : ""}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{!loading && !err && items.length === 0 && (
|
||||||
|
<div className="sw-search__row sw-search__muted">No results</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,118 @@
|
||||||
|
/* SmartSearchBar — built to play nice with themes (uses CSS variables with fallbacks) */
|
||||||
|
|
||||||
|
.sw-search {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 560px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-search__bar {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
|
||||||
|
background: var(--sw-panel-bg, rgba(15, 18, 28, 0.62));
|
||||||
|
border: 1px solid var(--sw-panel-border, rgba(255, 255, 255, 0.10));
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-search__input {
|
||||||
|
flex: 1;
|
||||||
|
border: 0;
|
||||||
|
outline: 0;
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
color: var(--sw-text, rgba(255,255,255,0.92));
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 2px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-search__input::placeholder {
|
||||||
|
color: var(--sw-muted, rgba(255,255,255,0.55));
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-search__icons {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-search__iconBtn {
|
||||||
|
border: 0;
|
||||||
|
outline: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
background: var(--sw-chip-bg, rgba(255,255,255,0.08));
|
||||||
|
color: var(--sw-text, rgba(255,255,255,0.92));
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-search__iconBtn:active {
|
||||||
|
transform: translateY(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-search__dropdown {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 50;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin-top: 8px;
|
||||||
|
|
||||||
|
border-radius: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
background: var(--sw-panel-bg-2, rgba(12, 14, 22, 0.80));
|
||||||
|
border: 1px solid var(--sw-panel-border, rgba(255, 255, 255, 0.10));
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-search__row {
|
||||||
|
padding: 10px 12px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-search__item {
|
||||||
|
width: 100%;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
color: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-search__item:hover,
|
||||||
|
.sw-search__item.is-active {
|
||||||
|
background: var(--sw-hover, rgba(255,255,255,0.08));
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-search__title {
|
||||||
|
color: var(--sw-text, rgba(255,255,255,0.92));
|
||||||
|
font-size: 13.5px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-search__sub {
|
||||||
|
margin-top: 2px;
|
||||||
|
color: var(--sw-muted, rgba(255,255,255,0.60));
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-search__muted {
|
||||||
|
color: var(--sw-muted, rgba(255,255,255,0.60));
|
||||||
|
font-size: 12.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-search__error {
|
||||||
|
color: var(--sw-danger, #ff6b6b);
|
||||||
|
font-size: 12.5px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue