67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Lab Footer Component
|
|
*
|
|
* Simple 1-line footer for lab section with contextual navigation links.
|
|
* Displays copyright on left and contextual docs/API links on right.
|
|
* Uses zinc color palette.
|
|
*/
|
|
|
|
import { usePathname } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import { BookOpen, Code } from 'lucide-react';
|
|
|
|
type LinkMapEntry = {
|
|
docs: string;
|
|
api: string;
|
|
};
|
|
|
|
type LinkMap = {
|
|
[key: string]: LinkMapEntry;
|
|
};
|
|
|
|
const linkMap: LinkMap = {
|
|
'/lab/generate': { docs: '/docs', api: '/docs/api/text-to-image' },
|
|
'/lab/images': { docs: '/docs', api: '/docs/api/images' },
|
|
'/lab/live': { docs: '/docs', api: '/docs/api/text-to-image' },
|
|
'/lab/upload': { docs: '/docs', api: '/docs/api/upload' },
|
|
};
|
|
|
|
export const LabFooter = () => {
|
|
const pathname = usePathname();
|
|
const links = linkMap[pathname] || { docs: '/docs', api: '/docs/api' };
|
|
|
|
return (
|
|
<footer
|
|
className="border-t border-zinc-800 bg-zinc-950/50 backdrop-blur-sm"
|
|
role="contentinfo"
|
|
>
|
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 md:gap-0 px-4 py-3 md:h-12">
|
|
{/* Left: Copyright */}
|
|
<p className="text-xs text-zinc-500 order-2 md:order-1">
|
|
© 2025 Banatie. Built for builders who create.
|
|
</p>
|
|
|
|
{/* Right: Contextual Links */}
|
|
<nav aria-label="Footer navigation" className="flex items-center gap-4 order-1 md:order-2">
|
|
<Link
|
|
href={links.docs}
|
|
className="text-xs text-zinc-500 hover:text-white transition-colors flex items-center gap-1.5"
|
|
>
|
|
<BookOpen className="w-3.5 h-3.5" />
|
|
Documentation
|
|
</Link>
|
|
<Link
|
|
href={links.api}
|
|
className="text-xs text-zinc-500 hover:text-white transition-colors flex items-center gap-1.5"
|
|
>
|
|
<Code className="w-3.5 h-3.5" />
|
|
API Reference
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|