132 lines
5.6 KiB
TypeScript
132 lines
5.6 KiB
TypeScript
import { Link } from '@inertiajs/react';
|
|
import { ChevronDown } from 'lucide-react';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import { offerStates } from '@/lib/offer-editorial';
|
|
import { offerListHref, type OfferListFilters } from '@/lib/offer-navigation';
|
|
|
|
export default function OfferNavigation({
|
|
canCreate = false,
|
|
filters,
|
|
}: {
|
|
canCreate?: boolean;
|
|
filters?: OfferListFilters;
|
|
}) {
|
|
const trigger =
|
|
'tempo-nav-trigger inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium';
|
|
return (
|
|
<nav
|
|
aria-label="Navegação das ofertas"
|
|
className="bg-background flex min-w-0 flex-wrap items-center gap-2 rounded-xl border p-2"
|
|
>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger className={trigger}>
|
|
Ofertas{' '}
|
|
<ChevronDown aria-hidden="true" className="size-4" />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="start"
|
|
collisionPadding={12}
|
|
className="tempo-dropdown max-h-[70vh] w-64 max-w-[calc(100vw-2rem)] overflow-y-auto p-2"
|
|
>
|
|
<DropdownMenuItem asChild className="tempo-menu-item">
|
|
<Link href="/minhas-oportunidades/ofertas">
|
|
As minhas ofertas
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
{canCreate && (
|
|
<DropdownMenuItem asChild className="tempo-menu-item">
|
|
<Link href="/minhas-oportunidades/ofertas/criar">
|
|
Preparar oferta
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
)}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
{filters && (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger className={trigger}>
|
|
{filters.state
|
|
? (offerStates[filters.state] ?? 'Estado')
|
|
: 'Todos os estados'}
|
|
<ChevronDown aria-hidden="true" className="size-4" />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="start"
|
|
collisionPadding={12}
|
|
className="tempo-dropdown max-h-[70vh] w-72 max-w-[calc(100vw-2rem)] overflow-y-auto p-2"
|
|
>
|
|
{[
|
|
['', 'Todos os estados'],
|
|
...Object.entries(offerStates),
|
|
].map(([state, label]) => (
|
|
<DropdownMenuItem
|
|
key={state}
|
|
asChild
|
|
className="tempo-menu-item"
|
|
>
|
|
<Link
|
|
href={offerListHref({ ...filters, state })}
|
|
aria-current={
|
|
(filters.state ?? '') === state
|
|
? 'page'
|
|
: undefined
|
|
}
|
|
>
|
|
{label}
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)}
|
|
{filters?.operational && (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger className={trigger}>
|
|
Acompanhamento{' '}
|
|
<ChevronDown aria-hidden="true" className="size-4" />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="start"
|
|
collisionPadding={12}
|
|
className="tempo-dropdown w-72 max-w-[calc(100vw-2rem)] p-2"
|
|
>
|
|
<DropdownMenuItem asChild className="tempo-menu-item">
|
|
<Link
|
|
href={offerListHref({
|
|
...filters,
|
|
pending_reports: false,
|
|
})}
|
|
aria-current={
|
|
!filters.pending_reports
|
|
? 'page'
|
|
: undefined
|
|
}
|
|
>
|
|
Todas no meu âmbito
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild className="tempo-menu-item">
|
|
<Link
|
|
href={offerListHref({
|
|
...filters,
|
|
pending_reports: true,
|
|
})}
|
|
aria-current={
|
|
filters.pending_reports ? 'page' : undefined
|
|
}
|
|
>
|
|
Denúncias pendentes
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)}
|
|
</nav>
|
|
);
|
|
}
|