setD(true)}
onPointerUp={() => setD(false)}
onPointerLeave={() => setD(false)}
style={{ cursor: "pointer", transform: d ? `scale(${scale})` : "scale(1)",
transition: "transform .12s ease, filter .12s ease", filter: d ? "brightness(0.95)" : "none",
WebkitTapHighlightColor: "transparent", ...style }}>
{children}
);
}
function BottomNav({ active, go }) {
const Item = ({ id, label, icon }) => {
const on = active === id;
const col = on ? C.blue : C.grayMk;
return (
{/* real map tiles (Leaflet + CARTO) */}
{!ready && !error && (
)}
{error && (
Can't reach the live map
Check your connection — GRIP needs to be online to show real-time rack availability.
window.location.reload()} scale={0.96} style={{ marginTop: 6, padding: "12px 24px", borderRadius: 14, background: C.blue, boxShadow: "0 8px 18px rgba(21,96,243,0.28)" }}>
Try again
)}
{/* availability legend (top-left) */}
{[["Free", C.green], ["Filling", C.amber], ["Full", C.grayMk]].map(([label, col]) => (
))}
{/* zoom + re-center controls (top-right) */}
zoom(1)} scale={0.85} style={{ width: 42, height: 42, borderRadius: 12, background: "rgba(255,255,255,0.95)", boxShadow: "0 2px 8px rgba(0,0,0,0.18)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: F, fontWeight: 600, fontSize: 24, color: C.ink }}>+
zoom(-1)} scale={0.85} style={{ width: 42, height: 42, borderRadius: 12, background: "rgba(255,255,255,0.95)", boxShadow: "0 2px 8px rgba(0,0,0,0.18)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: F, fontWeight: 600, fontSize: 28, color: C.ink }}>−
{/* spots card — draggable bottom sheet */}
{/* drag handle */}
{/* greeting + live freshness (one row) */}
{greet}, Laura! 👋
Live{freshSec === 0 ? "" : ` · ${freshSec}s`}
{/* filter chips */}
{[["covered", "Covered", "umbrella"], ["secure", "Secure", "lock"], ["transit", "Near transit", "transit"]].map(([k, label, ic]) => {
const on = filters.includes(k);
return (
toggleFilter(k)} scale={0.94} style={{ display: "flex", alignItems: "center", gap: 6, padding: "8px 13px", borderRadius: 20,
background: on ? C.blue : "#fff", boxShadow: on ? "none" : `inset 0 0 0 1.5px rgba(0,0,0,0.12)` }}>
{label}
);
})}
{shownList.length > 0 ? (
<>
{/* horizontal carousel */}
{shownList.map((i, n) => (
startNav(NEAR_SPOTS[i])} onPhotoOpen={onPhotoOpen}
saved={saved.includes(NEAR_SPOTS[i].name)} onSave={() => toggleSave(NEAR_SPOTS[i].name)} />
))}
{/* crumbs progress — active crumb is wider */}
{shownList.map((i) => (
selectSpot(i, true)} style={{ cursor: "pointer",
width: i === idx ? 22 : 7, height: 7, borderRadius: 4,
background: i === idx ? C.blue : "rgba(0,0,0,0.16)", transition: "width .25s, background .25s" }} />
))}
) : (
/* empty state */
No racks match those filters
Try removing a filter to see more available spots nearby.
setFilters([])} scale={0.96} style={{ marginTop: 4, padding: "11px 20px", borderRadius: 12, background: C.blue, boxShadow: "0 6px 16px rgba(21,96,243,0.28)" }}>
Clear filters
)}
{/* save toast */}
{toast && (
)}
);
}
const FAV = [
{ label: "Home", addr: "Maze 40", grad: "rgb(224,255,124)", ring: "rgb(150,190,40)" },
{ label: "Work", addr: "Rothschild 22", grad: "rgb(255,218,119)", ring: "rgb(220,170,30)" },
{ label: "Gym", addr: "Dizengoff 101", grad: "rgb(114,162,255)", ring: "rgb(21,96,243)" },
{ label: "Park", addr: "Yarkon Park", grad: "rgb(130,208,126)", ring: "rgb(19,159,12)" },
];
function FavIcon({ label }) {
const co = "rgb(0,0,0)";
if (label === "Home") return
;
if (label === "Work") return
;
if (label === "Gym") return
;
if (label === "Park") return
;
return
;
}
function FavoritesScreen({ go, openSearch }) {
const [editing, setEditing] = useState(false);
const [favs, setFavs] = useState(FAV);
const [recents, setRecents] = useState(RECENTS);
// deterministic meta for a recent (spots + distance) so each row reads like a real place
const metaFor = (name) => {
let h = 0; for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
const spots = h % 4; // 0..3 (0 = full)
const km = (0.2 + (h % 18) / 10).toFixed(1); // 0.2 .. 1.9
return { spots, km };
};
const removeFav = (label) => setFavs((f) => f.filter((x) => x.label !== label));
const removeRecent = (name) => setRecents((r) => r.filter((x) => x !== name));
return (
{/* fixed top: search + favorites + recents header */}
{/* search bar */}
openSearch("")} scale={0.99}
style={{ height: 56, borderRadius: 16, background: "#fff", boxShadow: `inset 0 0 0 1px ${C.stroke}, 0 2px 8px rgba(21,96,243,0.06)`,
display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 16px" }}>
{/* favorites header */}
Favorites
setEditing((e) => !e)} scale={0.92}
style={{ display: "flex", alignItems: "center", gap: 6, padding: "6px 12px", borderRadius: 20,
background: editing ? C.blue : "rgba(21,96,243,0.08)" }}>
{editing ? "Done" : "Edit"}
{/* favorites row — peek-cut last card hints horizontal scroll */}
{favs.map((f) => (
editing ? removeFav(f.label) : openSearch(f.addr)} scale={0.92}
style={{ width: 66, height: 66, borderRadius: 16, boxShadow: `inset 0 0 0 1.5px ${f.ring}`,
background: `linear-gradient(160deg, ${f.grad} 0%, #fff 115%)`,
display: "flex", alignItems: "center", justifyContent: "center", position: "relative", overflow: "visible" }}>
{f.label}
))}
{/* add-favorite card */}
openSearch("")} scale={0.92}
style={{ width: 66, height: 66, borderRadius: 16, border: `1.5px dashed ${C.stroke}`, boxSizing: "border-box",
background: "rgba(21,96,243,0.03)", display: "flex", alignItems: "center", justifyContent: "center" }}>
Add
{/* recents header */}
Recents
{recents.length > 0 && (
setRecents([])} scale={0.95} style={{ padding: "4px 8px" }}>
Clear all
)}
{/* scrollable recents list */}
{recents.length === 0 && (
No recent searches
)}
{recents.map((r, i) => {
const m = metaFor(r);
const dot = m.spots === 0 ? C.grayMk : m.spots <= 2 ? C.amber : C.green;
return (
editing ? removeRecent(r) : openSearch(r)} scale={0.99}
style={{ display: "flex", alignItems: "center", gap: 13, padding: "14px 0",
borderBottom: i < recents.length - 1 ? "1px solid rgba(0,0,0,0.07)" : "none" }}>
{r}
{m.spots === 0 ? "Full" : `${m.spots} spot${m.spots > 1 ? "s" : ""}`} · {m.km} km
{editing ? (
) : (
);
})}
);
}
function SearchScreen({ dest, back, startNav, onPhotoOpen }) {
const [query, setQuery] = useState(dest || "");
const [kbOpen, setKbOpen] = useState(true);
const [caps, setCaps] = useState(true);
const inputRef = useRef(null);
// open the keyboard on mount
useEffect(() => {
const t = setTimeout(() => setKbOpen(true), 340);
return () => clearTimeout(t);
}, []);
const type = (ch) => { setQuery((q) => q + (caps ? ch.toUpperCase() : ch)); if (caps) setCaps(false); };
const backspace = () => setQuery((q) => q.slice(0, -1));
const space = () => setQuery((q) => q + " ");
const results = buildResults(query || dest);
const q = query.trim().toLowerCase();
const shown = q ? results.filter((s) => s.name.toLowerCase().includes(q)) : results;
const KB_H = 300;
return (
{/* Fixed header with live search input */}
setKbOpen(true)} scale={0.995} style={{ flex: 1, height: 48, borderRadius: 14, background: "#fff", boxShadow: `inset 0 0 0 1px ${kbOpen ? C.blue : C.stroke}`, display: "flex", alignItems: "center", gap: 10, padding: "0 14px" }}>
{query || "Search available spot"}
{kbOpen &&
{query && (
setQuery("")} scale={0.85} style={{ flex: "none", width: 22, height: 22, borderRadius: 11, background: "rgba(0,0,0,0.08)", display: "flex", alignItems: "center", justifyContent: "center" }}>
)}
{/* Scrollable cards container */}
{q ? `Results for "${query}"` : "Spots to Grip Near"}
{shown.length === 0 && (
No spots match “{query}”
)}
{shown.map((s, i) =>
startNav(s)} onPhotoOpen={onPhotoOpen} />)}
{/* On-screen keyboard */}
setCaps((c) => !c)} onReturn={() => setKbOpen(false)} height={KB_H} />
);
}
/* iOS-style on-screen keyboard */
function Keyboard({ open, caps, onKey, onBackspace, onSpace, onShift, onReturn, height }) {
const rows = [["q","w","e","r","t","y","u","i","o","p"], ["a","s","d","f","g","h","j","k","l"], ["z","x","c","v","b","n","m"]];
const keyStyle = { flex: 1, height: 42, borderRadius: 6, background: "#fff", display: "flex", alignItems: "center", justifyContent: "center",
fontFamily: F, fontWeight: 500, fontSize: 22, color: C.ink, boxShadow: "0 1px 0 rgba(0,0,0,0.28)", cursor: "pointer", userSelect: "none" };
const wideStyle = { ...keyStyle, background: "#aab0bb", flex: "none", width: 42 };
return (
{rows[0].map((k) =>
onKey(k)} scale={0.9} style={keyStyle}>{caps ? k.toUpperCase() : k} )}
{rows[1].map((k) =>
onKey(k)} scale={0.9} style={keyStyle}>{caps ? k.toUpperCase() : k} )}
{rows[2].map((k) =>
onKey(k)} scale={0.9} style={keyStyle}>{caps ? k.toUpperCase() : k} )}
);
}
function NavScreen({ spot, exit, spotTaken, dismissTaken, onTakenNavigate, onSeeOptions, onPhotoOpen, onHold, onArrive, A }) {
const elRef = useRef(null);
const { L, map, ready } = useLeaflet(elRef, { center: spot.ll || TLV_CENTER, zoom: 16, interactive: true });
const [held, setHeld] = useState(false);
const [holdLeft, setHoldLeft] = useState(300); // 5:00 hold window
useEffect(() => {
if (!held) return;
const id = setInterval(() => setHoldLeft((s) => Math.max(0, s - 1)), 1000);
return () => clearInterval(id);
}, [held]);
// a fresh spot resets the hold
useEffect(() => { setHeld(false); setHoldLeft(300); }, [spot]);
const mmss = `${Math.floor(holdLeft / 60)}:${String(holdLeft % 60).padStart(2, "0")}`;
const doHold = () => { if (held) return; setHeld(true); onHold && onHold(); };
const dir = navDirections(spot);
/* draw the route + animate the rider along it */
useEffect(() => {
if (!ready) return;
const a = USER_LL, dest = spot.ll || TLV_CENTER;
const mid1 = [a[0] + (dest[0] - a[0]) * 0.18, a[1] + (dest[1] - a[1]) * 0.55];
const mid2 = [a[0] + (dest[0] - a[0]) * 0.62, a[1] + (dest[1] - a[1]) * 0.86];
const route = [a, mid1, mid2, dest];
const casing = L.polyline(route, { color: "#1560F3", weight: 12, opacity: 0.22, lineCap: "round", lineJoin: "round" }).addTo(map);
const line = L.polyline(route, { color: "#1560F3", weight: 7, lineCap: "round", lineJoin: "round" }).addTo(map);
const destM = L.marker(dest, { icon: makeIcon(L, pinHTML(spot.spots ?? 1, true), 40, 52, [20, 52]) }).addTo(map);
const rider = L.marker(a, { icon: makeIcon(L, riderHTML(), 22, 22, [11, 11]), interactive: false, zIndexOffset: 900 }).addTo(map);
map.fitBounds(L.latLngBounds(route).pad(0.45), { animate: false });
const seg = []; let tot = 0;
for (let i = 0; i < route.length - 1; i++) { const d = map.distance(route[i], route[i + 1]); seg.push(d); tot += d; }
// Parse the ETA (e.g., "2 Minute" or "3 Minutes") and convert to milliseconds
const etaMatch = String(spot.min).match(/(\d+)/);
const etaMinutes = etaMatch ? parseInt(etaMatch[1]) : 5;
const dur = etaMinutes * 60 * 1000; // Convert minutes to milliseconds
let raf, start;
const step = (t) => {
if (!start) start = t;
let dist = (((t - start) % dur) / dur) * tot, i = 0;
while (i < seg.length - 1 && dist > seg[i]) { dist -= seg[i]; i++; }
const f = seg[i] ? dist / seg[i] : 0, A2 = route[i], B2 = route[i + 1];
rider.setLatLng([A2[0] + (B2[0] - A2[0]) * f, A2[1] + (B2[1] - A2[1]) * f]);
raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => { cancelAnimationFrame(raf); [casing, line, destM, rider].forEach((o) => map.removeLayer(o)); };
}, [ready, spot]); // eslint-disable-line react-hooks/exhaustive-deps
return (
{/* full-screen map */}
{!ready && (
Loading map…
)}
{/* exit button (top-right) */}
{/* direction banners (top-left) */}
{/* primary direction */}
{dir.text}
{/* next turn hint */}
{dir.nextLabel}
{/* bottom destination card */}
{/* reservation banner (when held) */}
{held && (
Spot reserved for you
{mmss}
)}
{/* destination info */}
{spot.spots || 3}
Spots Available
{spot.name}
{String(spot.km).includes("KM") ? spot.km : `${spot.km} KM`}
{/* action buttons */}
{held ? `Held · ${mmss}` : "Hold spot"}
I've arrived
{/* spot-taken modal */}
{spotTaken && (
💔
All Spots Are Taken
No Worries,
onTakenNavigate({ name: "Maze 27, Tel Aviv-Yaffo", spots: 1, km: "0.2", min: "1 Minute", ll: [32.079, 34.7726] })}
style={{ height: 46, borderRadius: 14, background: C.blue, display: "flex", alignItems: "center", justifyContent: "center" }}>
Navigate
See Other Options
)}
);
}
function CountUp({ value }) {
const m = String(value).match(/^([\d.]+)(.*)$/);
const target = m ? parseFloat(m[1]) : 0;
const suffix = m ? m[2] : "";
const dec = (m && m[1].includes(".")) ? 1 : 0;
const [n, setN] = useState(0);
useEffect(() => {
let raf, start; const dur = 950;
const step = (t) => { if (!start) start = t; const p = Math.min(1, (t - start) / dur); const e = 1 - Math.pow(1 - p, 3); setN(target * e); if (p < 1) raf = requestAnimationFrame(step); };
raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf);
}, [target]);
return
{n.toFixed(dec)}{suffix} ;
}
function ProfileScreen({ go, A }) {
const stats = [
{ v: "18", l: "Rides", icon: "bike" }, { v: "8.7", l: "KM\nCycled", icon: "route" },
{ v: "13", l: "Searches", icon: "search" }, { v: "89%", l: "Success\nRate", green: true, icon: "check" },
];
const menu = [
{ t: "My Riding Profile", icon: "rider" },
{ t: "Activity History", icon: "history" },
{ t: "Preferences and Settings", icon: "settings" },
{ t: "Report a Problem", icon: "report" },
];
return (
{/* fixed header */}
Hello, Laura! 👋
L
{ e.target.style.display='none'; }} />
{/* edit / camera badge */}
{/* name + handle */}
Laura Leezy
laura.leezy@gmail.com
{/* scrollable body */}
This Month
{stats.map((s, i) => (
{s.l}
))}
{menu.map((m, i) => (
{m.t}
))}
go("welcome")} scale={0.97} style={{ height: 54, borderRadius: 12, marginTop: 24, boxShadow: `inset 0 0 0 1.5px ${C.red}`,
display: "flex", alignItems: "center", justifyContent: "center", gap: 10 }}>
Log Out
);
}
/* small stat-card icons */
function StatIcon({ name, color }) {
const p = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
if (name === "bike") return
;
if (name === "route") return
;
if (name === "search") return
;
if (name === "check") return
;
return null;
}
/* leading icons for menu rows */
function MenuIcon({ name }) {
const p = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: C.blue, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
if (name === "rider") return
;
if (name === "history") return
;
if (name === "settings") return
;
if (name === "report") return
;
return null;
}
/* =========================================================================
* ARRIVAL + REPORT-RACK END STATE
* =======================================================================*/
function ArriveScreen({ spot, reserved, photoUrl, onDone, onFindAnother }) {
const [stage, setStage] = useState("confirm"); // confirm | report | done
const [tags, setTags] = useState([]);
const [imgOk, setImgOk] = useState(true);
const now = (() => { const d = new Date(); return `${d.getHours()}:${String(d.getMinutes()).padStart(2, "0")}`; })();
const reportChips = [
{ k: "free", label: "Free & easy", good: true },
{ k: "tight", label: "Tight fit" },
{ k: "hard", label: "Hard to find" },
{ k: "full", label: "Was full" },
{ k: "broken", label: "Rack broken" },
{ k: "blocked", label: "Blocked / obstructed" },
];
const toggle = (k) => setTags((t) => t.includes(k) ? t.filter((x) => x !== k) : [...t, k]);
return (
{/* hero */}
You've arrived!
{spot.name}
{/* sheet */}
{stage === "confirm" && (
{/* rack preview */}
{imgOk ?
setImgOk(false)} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
:
}
{spot.name}
{reserved ? "Reserved · arrived " : "Arrived "}{now}
{reserved && (
)}
Did you park here?
setStage("report")} scale={0.97} style={{ height: 54, borderRadius: 14, background: C.green,
display: "flex", alignItems: "center", justifyContent: "center", gap: 10, boxShadow: "0 8px 18px rgba(19,159,12,0.3)" }}>
Yes, I'm parked
Spot was taken, find another
)}
{stage === "report" && (
How was this rack?
Your feedback keeps GRIP's map accurate for other riders.
{reportChips.map((c) => {
const on = tags.includes(c.k);
const accent = c.good ? C.green : C.blue;
return (
toggle(c.k)} scale={0.95} style={{ padding: "10px 16px", borderRadius: 22,
background: on ? (c.good ? "rgb(236,255,209)" : "rgba(21,96,243,0.08)") : "#fff",
boxShadow: `inset 0 0 0 1.5px ${on ? accent : "rgba(0,0,0,0.12)"}`, display: "flex", alignItems: "center", gap: 7 }}>
{on && {c.label}
);
})}
setStage("done")} scale={0.97} style={{ height: 54, borderRadius: 14, background: C.blue, marginTop: 4,
display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 8px 18px rgba(21,96,243,0.28)" }}>
{tags.length ? "Submit feedback" : "Done"}
setStage("done")} scale={0.97} style={{ textAlign: "center" }}>
Skip
)}
{stage === "done" && (
🎉
Parked & saved!
This ride to {spot.name} was added to your history. Thanks for keeping the map fresh!
{String(spot.km).replace("KM", "").trim()} km
Cycled
Done
)}
);
}
/* =========================================================================
* ROOT
* =======================================================================*/
/* which transition between two screens */
function dirFor(from, to) {
if (to === "nav") return "up";
if (from === "nav") return "down";
if (to === "arrive") return "up";
if (from === "arrive") return "down";
if (to === "search") return "forward";
if (from === "search") return "back";
if (to === "welcome") return "fade";
if (from === "welcome") return "up";
if (to === "onboarding") return "fade";
if (from === "onboarding") return "forward";
return "fade"; // tab switches
}
const TRANS = {
forward: { enter: "slInR", exit: "slOutL", top: true },
back: { enter: "slInL", exit: "slOutR", top: false },
up: { enter: "slInUp", exit: "dimOut", top: true },
down: { enter: "fIn", exit: "slOutDown", top: false },
fade: { enter: "fIn", exit: "fOut", top: true },
};
function FigmaProject({ assetBase = "./assets/", initialScreen = "onboarding" } = {}) {
const A = assetBase.endsWith("/") ? assetBase : assetBase + "/";
const [screen, setScreen] = useState(initialScreen); // onboarding|welcome|map|favorites|search|nav|profile
const [dest, setDest] = useState("");
const [navSpot, setNavSpot] = useState(NEAR_SPOTS[0]);
const [spotTaken, setSpotTaken] = useState(false);
const [reserved, setReserved] = useState(false);
const [photoModal, setPhotoModal] = useState(null);
// Real bike-rack photos, mapped per spot (cycles the 3 uploads across all spots)
const RACK_PHOTOS = [A + "rack-1.jpg", A + "rack-2.jpg", A + "rack-3.jpg"];
const PHOTO_MAP = {
"photo1": RACK_PHOTOS[0], "photo2": RACK_PHOTOS[1], "photo3": RACK_PHOTOS[2],
"Pinsker 62": RACK_PHOTOS[0], "Ben Ami St 3": RACK_PHOTOS[1], "Bograshov 12": RACK_PHOTOS[2],
"Maze 27": RACK_PHOTOS[0], "Maze 27, Tel Aviv-Yaffo": RACK_PHOTOS[0],
"Sheinkin 53": RACK_PHOTOS[1], "Derech Jaffa 9": RACK_PHOTOS[2], "Zrubavel 16": RACK_PHOTOS[0],
};
const photoFor = (key) => {
if (PHOTO_MAP[key]) return PHOTO_MAP[key];
// deterministic fallback: hash the key to one of the 3 photos
const str = String(key || "");
let h = 0; for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) >>> 0;
return RACK_PHOTOS[h % RACK_PHOTOS.length];
};
const screenRef = useRef(initialScreen);
const viewRef = useRef(null);
const [exiting, setExiting] = useState(null); // { el, dir }
const timer = useRef(0);
const navigate = useCallback((to) => {
const from = screenRef.current;
if (from === to) return;
setExiting({ el: viewRef.current, dir: dirFor(from, to) });
screenRef.current = to;
setScreen(to);
clearTimeout(timer.current);
timer.current = setTimeout(() => setExiting(null), 470);
}, []);
const go = navigate;
const openSearch = (d) => { setDest(d); navigate("search"); };
const startNav = (spot) => { setNavSpot(spot); setSpotTaken(false); setReserved(false); navigate("nav"); };
const onPhotoOpen = (photoKey) => { setPhotoModal(photoKey); };
// simulate a live sensor update: the chosen spot gets taken mid-ride — unless reserved
useEffect(() => {
if (screen !== "nav" || reserved) return;
const t = setTimeout(() => setSpotTaken(true), 5000);
return () => clearTimeout(t);
}, [screen, reserved]);
let view;
if (screen === "onboarding") view =
go("welcome")} />;
else if (screen === "welcome") view = go("favorites")} startNav={startNav} onPhotoOpen={onPhotoOpen} />;
else if (screen === "nav") view = (
go("map")}
onHold={() => setReserved(true)}
onArrive={() => go("arrive")}
dismissTaken={() => setSpotTaken(false)}
onTakenNavigate={(alt) => { setNavSpot(alt); setSpotTaken(false); setReserved(false); }}
onSeeOptions={() => { setSpotTaken(false); setDest(navSpot.name); go("search"); }} />
);
else if (screen === "arrive") view = (
go("map")} onFindAnother={() => { setDest(navSpot.name); go("search"); }} />
);
else if (screen === "profile") view =
{exiting && (
{exiting.el}
)}
{view}
{/* Photo modal */}
{photoModal && (
setPhotoModal(null)} scale={0.95} style={{ position: "absolute", inset: 0, zIndex: 0 }} />
setPhotoModal(null)} scale={0.8} style={{ position: "absolute", right: 12, top: 12, width: 40, height: 40, borderRadius: 20,
background: "rgba(255,255,255,0.9)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 4px 12px rgba(0,0,0,0.2)", zIndex: 10 }}>
)}
{/* buttons */}
{ e.target.style.display='none'; }} />