Files
Investidor-V2/resources/js/components/catalogue-navigation.tsx
T

106 lines
4.2 KiB
TypeScript

import { Link, usePage } from '@inertiajs/react';
import { searchTerritoryHref } from '@/lib/search-territory';
export default function CatalogueNavigation({
dimensionUrl,
}: {
dimensionUrl?: (dimension: string) => string;
}) {
const { url, props } = usePage<{
educationEnabled?: boolean;
legacyContentEnabled?: boolean;
existingBusinessEnabled?: boolean;
}>();
const context = new URL(url, 'https://qa.invalid').searchParams.get(
'context',
);
const withContext = (href: string) => {
const u = new URL(href, 'https://qa.invalid');
if (
u.pathname === '/oportunidades' &&
u.searchParams.has('dimension') &&
dimensionUrl
)
return dimensionUrl(u.searchParams.get('dimension')!);
if (context) u.searchParams.set('context', context);
return searchTerritoryHref(u.pathname + u.search, url);
};
const sections = {
'Enquadramento e filtros': [
['Clusters', '/oportunidades?dimension=cluster'],
['Corredores', '/oportunidades?dimension=corridor'],
['ZEE', '/oportunidades?dimension=zee'],
['ZFI', '/oportunidades?dimension=zfi'],
],
'Modalidade e vistas': [
...(props.existingBusinessEnabled
? [
[
'Comprar uma empresa',
'/negocios?modality=company_purchase',
],
['Vender uma empresa', '/negocios?modality=company_sale'],
['Imobiliário', '/negocios?modality=real_estate'],
[
'Terrenos e direitos fundiários',
'/negocios?modality=land_right',
],
['Todos os negócios publicados', '/negocios'],
]
: []),
['Parcerias', '/parcerias'],
],
'Pesquisa transversal': [
['Sectores de investimento', '/sectores'],
['Localizações e mapa', '/oportunidades?view=map'],
],
'Consulta relacionada': [
['Projectos âncora', '/carteira?kind=project'],
['Parques industriais', '/zonas?physical_category=industrial_park'],
['Zonas e enquadramentos', '/zonas'],
['Carteira e estruturas', '/carteira'],
['Fichas de clusters', '/carteira?kind=cluster'],
['Fichas de corredores', '/carteira?kind=corridor'],
['Fichas ZEE', '/zonas?category=zee'],
['Fichas ZFI', '/zonas?category=zfi'],
...(props.educationEnabled
? [['Educação e competências', '/educacao']]
: []),
...(props.legacyContentEnabled
? [['Artigos setoriais', '/explorar/agronegocio']]
: []),
['Documentos', '/documentos'],
['Legislação', '/legislacao'],
['Como investir', '/como-investir'],
],
};
return (
<details className="my-4 rounded-xl border bg-white p-4">
<summary className="cursor-pointer font-semibold">
Catálogos relacionados
</summary>
<nav
className="my-4 grid gap-3 rounded-xl border bg-white p-4 sm:grid-cols-2 lg:grid-cols-4"
aria-label="Explorar dentro do catálogo"
>
{Object.entries(sections).map(([title, items]) => (
<section key={title}>
<h2 className="mb-2 font-semibold">{title}</h2>
<ul className="space-y-2">
{items.map(([label, href]) => (
<li key={label}>
<Link
className="underline"
href={withContext(href)}
>
{label}
</Link>
</li>
))}
</ul>
</section>
))}
</nav>
</details>
);
}