tiagoandClaude Sonnet 5
323912748f
Adiciona o frontend Next.js em frontend/ (setup, design system, autenticação/tema, layout/navegação, área master, área tenant completa: clientes, produtos, vendas, recebimentos, whatsapp, e-mail, alertas, equipe e perfil). Estende o backend de forma aditiva e autorizada: cookie httpOnly para refresh token (Etapa 13) e CRUD de equipe + edição de perfil do tenant (Etapa 18, módulo src/modules/equipe/ novo e PUT /tenant/perfil). Detalhes completos em Etapas/V2/*. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { Bell, Menu, Search } from 'lucide-react';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
|
|
interface TopbarProps {
|
|
breadcrumb: React.ReactNode;
|
|
/** Logo compacta (só símbolo) exibida no lugar do breadcrumb no mobile. */
|
|
mobileBrand: React.ReactNode;
|
|
onMenuClick: () => void;
|
|
}
|
|
|
|
/**
|
|
* Topbar fixa no topo. Desktop: breadcrumb + busca rápida + notificações.
|
|
* Mobile (`<md`): logo símbolo + hambúrguer (abre o `Drawer`) + notificações
|
|
* — a busca funcional real fica para a Etapa 18/19, aqui só o componente.
|
|
*/
|
|
export function Topbar({ breadcrumb, mobileBrand, onMenuClick }: TopbarProps) {
|
|
return (
|
|
<header className="sticky top-0 z-20 flex h-16 items-center gap-3 border-b border-border bg-surface px-4 md:px-6">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className="md:hidden"
|
|
onClick={onMenuClick}
|
|
aria-label="Abrir menu"
|
|
>
|
|
<Menu className="size-5" />
|
|
</Button>
|
|
|
|
<div className="flex min-w-0 flex-1 items-center gap-3">
|
|
<div className="md:hidden">{mobileBrand}</div>
|
|
<div className="hidden min-w-0 md:block">{breadcrumb}</div>
|
|
</div>
|
|
|
|
<div className="hidden max-w-xs flex-1 items-center md:flex">
|
|
<div className="relative w-full">
|
|
<Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-neutral-500" />
|
|
<Input placeholder="Buscar clientes, vendas..." className="pl-9" aria-label="Busca rápida" />
|
|
</div>
|
|
</div>
|
|
|
|
<Button type="button" variant="ghost" size="icon-sm" aria-label="Notificações">
|
|
<Bell className="size-5" />
|
|
</Button>
|
|
</header>
|
|
);
|
|
}
|