36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import Link from 'next/link';
|
||
|
|
import { usePathname } from 'next/navigation';
|
||
|
|
|
||
|
|
// Routes where the global "+ New server" CTA makes no sense — the wizard is
|
||
|
|
// itself the create flow and owns its own primary action.
|
||
|
|
const HIDDEN_PATHS: readonly string[] = ['/servers/new'];
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Mobile-only sticky bottom action bar. On phones the dashboard top header is
|
||
|
|
* already tight with the nav icons; the primary action belongs in the thumb
|
||
|
|
* zone, not crammed top-right. Hidden from `sm:` upward where the header has
|
||
|
|
* room for the same button inline.
|
||
|
|
*/
|
||
|
|
export function MobileActionBar() {
|
||
|
|
const pathname = usePathname();
|
||
|
|
if (HIDDEN_PATHS.includes(pathname)) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="fixed inset-x-0 bottom-0 z-40 border-t border-[--color-border] bg-[--color-bg-elevated]/95 backdrop-blur sm:hidden"
|
||
|
|
style={{ paddingBottom: 'max(env(safe-area-inset-bottom), 0.5rem)' }}
|
||
|
|
>
|
||
|
|
<div className="mx-auto flex max-w-7xl px-4 pt-2.5">
|
||
|
|
<Link
|
||
|
|
href="/servers/new"
|
||
|
|
className="inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-md bg-[--color-accent] text-[14px] font-medium text-white transition-colors duration-200 active:bg-[#5557e8]"
|
||
|
|
>
|
||
|
|
+ New server
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|