skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 11 Packages Wiki Activity Actions 1

fix: replace floating map links pill with slim footer and fit follower stats

Browse source
This commit is contained in:
SkateSpots 2026-10-29 21:35:45 +07:00
parent d3d82f7d46
commit 569ad9b01c
1 changed files with 7 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/components/MapFooterStrip.tsx
View file

@ -1,8 +1,5 @@
import { useState } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { ChevronUp } from 'lucide-react';
import { useTranslation } from '@/contexts/language'; import { useTranslation } from '@/contexts/language';
import { cn } from '@/lib/utils';
/** /**
* The site links that live in the desktop footer — surfaced on the map * The site links that live in the desktop footer — surfaced on the map
@ -14,8 +11,6 @@ import { cn } from '@/lib/utils';
*/ */
export function MapFooterStrip() { export function MapFooterStrip() {
const { t } = useTranslation(); const { t } = useTranslation();
const [open, setOpen] = useState(false);
const links = [ const links = [
{ to: '/diy', label: t('nav.diy') }, { to: '/diy', label: t('nav.diy') },
{ to: '/newsletter', label: t('nav.newsletter') }, { to: '/newsletter', label: t('nav.newsletter') },
@ -43,25 +38,13 @@ export function MapFooterStrip() {
</div> </div>
</div> </div>
{/* Mobile — a tiny chip that expands to a compact row */} {/* Mobile — a slim always-visible strip, not a floating chip over the nav */}
<div className="pointer-events-auto relative mb-1.5 flex justify-center md:hidden"> <div className="pointer-events-auto flex w-full items-center justify-center gap-3 border-t border-white/10 bg-black/80 px-3 py-1 text-[10px] text-gray-400 backdrop-blur md:hidden">
{open && ( {links.map((l) => (
<div className="absolute bottom-full left-1/2 mb-1.5 flex max-w-[calc(100vw-1rem)] -translate-x-1/2 items-center gap-3 overflow-x-auto whitespace-nowrap rounded-full border border-white/10 bg-black/85 px-3 py-1.5 text-[10px] text-gray-300 backdrop-blur scrollbar-hide"> <Link key={l.to} to={l.to} className="font-semibold transition-colors hover:text-[#ccff00]">
{links.map((l) => ( {l.label}
<Link key={l.to} to={l.to} className="font-medium hover:text-[#ccff00]"> </Link>
{l.label} ))}
</Link>
))}
</div>
)}
<button
onClick={() => setOpen((v) => !v)}
aria-expanded={open}
className="flex min-h-0 items-center gap-1 rounded-full bg-black/45 px-2.5 py-[3px] text-[10px] font-semibold text-gray-400/90 backdrop-blur transition-colors hover:text-gray-200"
>
<ChevronUp className={cn('h-3 w-3 transition-transform', open && 'rotate-180')} />
{t('mapUi.mapFooter.links')}
</button>
</div> </div>
</div> </div>
); );