map: move attribution to top-right below Near Me, add Vibed with Shakespeare below Quick Snap

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-07-23 20:01:28 +07:00
parent f8b14f1056
commit 889eb922eb
2 changed files with 23 additions and 38 deletions

View file

@ -1139,40 +1139,7 @@ export function SpotMap({
<div className={className}> <div className={className}>
<div className="relative h-full w-full"> <div className="relative h-full w-full">
<div ref={mapRef} className="h-full w-full rounded-xl" /> <div ref={mapRef} className="h-full w-full rounded-xl" />
{/* OpenStreetMap Attribution */}
<div className="absolute bottom-2 left-2 z-[1000] bg-black/80 backdrop-blur px-2 py-1 rounded text-[10px] text-gray-400">
Map data ©{' '}
<a
href="https://carto.com/attributions"
target="_blank"
rel="noopener noreferrer"
className="text-[#ccff00] hover:underline"
>
CARTO
</a>
{' '}·{' '}
<a
href="https://www.openstreetmap.org/copyright"
target="_blank"
rel="noopener noreferrer"
className="text-[#ccff00] hover:underline"
>
OSM
</a>
{showBtcMap && (
<>
{' • '}
<a
href="https://btcmap.org"
target="_blank"
rel="noopener noreferrer"
className="text-[#f7931a] hover:underline"
>
BTC Map
</a>
</>
)}
</div>
</div> </div>
</div> </div>
); );

View file

@ -1273,8 +1273,8 @@ export default function MapPage() {
))} ))}
</div> </div>
{/* Near Me button — floating top-right */} {/* Near Me button + attribution — floating top-right */}
<div className="absolute top-4 right-4 z-[1000]"> <div className="absolute top-4 right-4 z-[1000] flex flex-col items-end gap-1.5">
<Button <Button
onClick={handleNearMe} onClick={handleNearMe}
disabled={nearMeLoading} disabled={nearMeLoading}
@ -1288,20 +1288,38 @@ export default function MapPage() {
<Target className="h-4 w-4 text-[#ccff00]" /> <Target className="h-4 w-4 text-[#ccff00]" />
)} )}
</Button> </Button>
{/* Map attribution */}
<div className="bg-black/70 backdrop-blur px-2 py-1 rounded text-[10px] text-gray-400 text-right leading-snug">
©{' '}
<a href="https://carto.com/attributions" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:underline">CARTO</a>
{' · '}
<a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:underline">OSM</a>
{showBtcMap && (
<>{' · '}<a href="https://btcmap.org" target="_blank" rel="noopener noreferrer" className="text-[#f7931a] hover:underline">BTC Map</a></>
)}
</div>
</div> </div>
{/* Quick Capture FAB - only show for logged in users on mobile */} {/* Quick Capture FAB - only show for logged in users on mobile */}
{user && ( {user && (
<div className="absolute bottom-24 right-4 z-[1000] md:hidden"> <div className="absolute bottom-24 right-4 z-[1000] md:hidden flex flex-col items-center gap-1">
<Button <Button
onClick={() => setShowQuickCamera(true)} onClick={() => setShowQuickCamera(true)}
className="h-14 w-14 rounded-full bg-[#ff0040] hover:bg-[#ff0040]/90 shadow-xl shadow-[#ff0040]/30 border-2 border-white/20" className="h-14 w-14 rounded-full bg-[#ff0040] hover:bg-[#ff0040]/90 shadow-xl shadow-[#ff0040]/30 border-2 border-white/20"
> >
<Camera className="h-6 w-6" /> <Camera className="h-6 w-6" />
</Button> </Button>
<span className="absolute -bottom-6 left-1/2 -translate-x-1/2 text-xs text-white font-bold whitespace-nowrap bg-black/70 px-2 py-0.5 rounded"> <span className="text-xs text-white font-bold whitespace-nowrap bg-black/70 px-2 py-0.5 rounded">
Quick Snap Quick Snap
</span> </span>
<a
href="https://shakespeare.diy"
target="_blank"
rel="noopener noreferrer"
className="text-[10px] text-white/40 hover:text-white/70 whitespace-nowrap transition-colors"
>
Vibed with Shakespeare
</a>
</div> </div>
)} )}
</> </>