51 lines
2.2 KiB
TypeScript
51 lines
2.2 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import { useTranslation } from '@/contexts/language';
|
|
|
|
/**
|
|
* The site links that live in the desktop footer — surfaced on the map
|
|
* (a full-bleed route where the footer is hidden) without stealing map height.
|
|
*
|
|
* Desktop: a slim full-width bar. Mobile: a tiny collapsed "Links" chip that
|
|
* expands to a compact row. Always visible: the map is a full-bleed route, so
|
|
* this strip is the only footer there — no accidental permanent hiding.
|
|
*/
|
|
export function MapFooterStrip() {
|
|
const { t } = useTranslation();
|
|
const links = [
|
|
{ to: '/diy', label: t('nav.diy') },
|
|
{ to: '/newsletter', label: t('nav.newsletter') },
|
|
{ to: '/license', label: t('chromeUi.license') },
|
|
{ to: '/privacy', label: t('chromeUi.privacy') },
|
|
];
|
|
|
|
return (
|
|
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-[1000]">
|
|
{/* Desktop — slim full-width bar */}
|
|
<div className="pointer-events-auto hidden w-full items-center justify-between gap-4 border-t border-white/10 bg-black/85 px-4 py-1.5 text-[11px] text-gray-400 backdrop-blur md:flex">
|
|
<div className="flex items-center gap-4">
|
|
{links.map((l) => (
|
|
<Link key={l.to} to={l.to} className="font-medium transition-colors hover:text-[#ccff00]">
|
|
{l.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="flex items-center gap-1.5 text-gray-500">
|
|
{t('chromeUi.notSponsoredBy')}
|
|
<img src="/images/opensats.ico" alt="OpenSats" className="h-3 w-3" />
|
|
<span className="font-medium text-gray-400">OpenSats</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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-semibold transition-colors hover:text-[#ccff00]">
|
|
{l.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|