102 lines
4.8 KiB
TypeScript
102 lines
4.8 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import { usePathname } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import { MagnifyingGlassIcon, ChevronRightIcon, HomeIcon } from '@heroicons/react/24/outline';
|
|
import CommandPalette from '@/components/ui/CommandPalette';
|
|
|
|
export const TopBar: React.FC = () => {
|
|
const pathname = usePathname();
|
|
const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
|
|
|
|
// Gerar breadcrumbs a partir do pathname
|
|
const generateBreadcrumbs = () => {
|
|
const paths = pathname?.split('/').filter(Boolean) || [];
|
|
const breadcrumbs: Array<{ name: string; href: string; icon?: React.ComponentType<{ className?: string }> }> = [
|
|
{ name: 'Home', href: '/superadmin', icon: HomeIcon }
|
|
];
|
|
|
|
let currentPath = '';
|
|
paths.forEach((path, index) => {
|
|
currentPath += `/${path}`;
|
|
|
|
// Mapeamento de nomes amigáveis
|
|
const nameMap: Record<string, string> = {
|
|
'superadmin': 'SuperAdmin',
|
|
'agencies': 'Agências',
|
|
'signup-templates': 'Templates',
|
|
'agency-templates': 'Templates Agência',
|
|
'settings': 'Configurações',
|
|
'new': 'Novo',
|
|
};
|
|
|
|
if (index > 0) { // Pula 'superadmin' no breadcrumb
|
|
breadcrumbs.push({
|
|
name: nameMap[path] || path.charAt(0).toUpperCase() + path.slice(1),
|
|
href: currentPath,
|
|
});
|
|
}
|
|
});
|
|
|
|
return breadcrumbs;
|
|
};
|
|
|
|
const breadcrumbs = generateBreadcrumbs();
|
|
|
|
return (
|
|
<>
|
|
<div className="bg-white dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-800 px-6 py-3 flex items-center justify-between transition-colors">
|
|
{/* Breadcrumbs */}
|
|
<nav className="flex items-center gap-2 text-xs">
|
|
{breadcrumbs.map((crumb, index) => {
|
|
const Icon = crumb.icon;
|
|
const isLast = index === breadcrumbs.length - 1;
|
|
|
|
return (
|
|
<div key={crumb.href} className="flex items-center gap-2">
|
|
{Icon ? (
|
|
<Link
|
|
href={crumb.href}
|
|
className="flex items-center gap-1.5 text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200 transition-colors"
|
|
>
|
|
<Icon className="w-3.5 h-3.5" />
|
|
<span>{crumb.name}</span>
|
|
</Link>
|
|
) : (
|
|
<Link
|
|
href={crumb.href}
|
|
className={`${isLast ? 'text-gray-900 dark:text-white font-medium' : 'text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200'} transition-colors`}
|
|
>
|
|
{crumb.name}
|
|
</Link>
|
|
)}
|
|
|
|
{!isLast && <ChevronRightIcon className="w-3 h-3 text-gray-400 dark:text-zinc-600" />}
|
|
</div>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* Search Bar Trigger */}
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={() => setIsCommandPaletteOpen(true)}
|
|
className="group relative flex items-center gap-2 px-3 py-1.5 bg-gray-50 dark:bg-zinc-800 hover:bg-gray-100 dark:hover:bg-zinc-700 border border-gray-200 dark:border-zinc-700 rounded-lg text-xs text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200 transition-all w-64"
|
|
>
|
|
<MagnifyingGlassIcon className="w-4 h-4 text-gray-400 dark:text-zinc-500 group-hover:text-gray-600 dark:group-hover:text-zinc-300" />
|
|
<span>Pesquisar...</span>
|
|
<div className="ml-auto flex items-center gap-1">
|
|
<kbd className="hidden sm:inline-block px-1.5 py-0.5 text-[10px] font-mono font-medium text-gray-500 dark:text-zinc-400 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-700 rounded shadow-sm">
|
|
Ctrl K
|
|
</kbd>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<CommandPalette isOpen={isCommandPaletteOpen} setIsOpen={setIsCommandPaletteOpen} />
|
|
</>
|
|
);
|
|
};
|