skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 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

23
src/components/MapFooterStrip.tsx
View file

@ -1,8 +1,5 @@
import { useState } from 'react';
import { Link } from 'react-router-dom';
import { ChevronUp } from 'lucide-react';
import { useTranslation } from '@/contexts/language';
import { cn } from '@/lib/utils';
/**
* 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() {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
const links = [
{ to: '/diy', label: t('nav.diy') },
{ to: '/newsletter', label: t('nav.newsletter') },
@ -43,26 +38,14 @@ export function MapFooterStrip() {
</div>
</div>
{/* Mobile — a tiny chip that expands to a compact row */}
<div className="pointer-events-auto relative mb-1.5 flex justify-center md:hidden">
{open && (
<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">
{/* Mobile — a slim always-visible strip, not a floating chip over the nav */}
<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">
{links.map((l) => (
<Link key={l.to} to={l.to} className="font-medium hover:text-[#ccff00]">
<Link key={l.to} to={l.to} className="font-semibold transition-colors hover:text-[#ccff00]">
{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>
);
}