Acordos Internacionais

Fonte: WikiLAI
Revisão em 19h21min de 25 de julho de 2025 por Fiquemsabendo (discussão | contribs) (Criou a página com "import React, { useState, useEffect } from 'react'; import { Search, Globe, FileText, AlertCircle, ExternalLink, Calendar, MapPin, DollarSign, Shield, Users, Database, Downl...")
(dif) ← Revisão anterior | Revisão atual (dif) | Revisão seguinte → (dif)
Saltar para a navegação Saltar para a pesquisa

import React, { useState, useEffect } from 'react'; import { Search, Globe, FileText, AlertCircle, ExternalLink, Calendar, MapPin, DollarSign, Shield, Users, Database, Download, Copy, CheckCircle } from 'lucide-react';

// Dados estruturados do documento const ACORDOS_DATA = { 

 definicao: {
   titulo: "Acordos Internacionais",
   descricao: "Documentos pelos quais um Estado ou uma organização internacional assume obrigações e adquire direitos perante outros no âmbito internacional.",
   tipos: ["Tratados", "Convenções", "Acordos", "Protocolos"],
   caracteristicas: [
     "Estabelecem regras concretas para parcerias",
     "Criam compromisso jurídico",
     "Definem formas de cooperação futura"
   ]
 },
 
 casos: [
   {
     id: 'bbnj',
     nome: "Acordo BBNJ",
     descricao: "Biodiversidade Marinha em Áreas Além da Jurisdição Nacional",
     ano: 2023,
     status: "Assinado - Aguardando Ratificação",
     propostas: [
       "Criação de áreas marinhas protegidas",
       "Avaliações de impacto ambiental",
       "Financiamento baseado em exploração genética marinha",
       "Incentivo à cooperação científica"
     ],
     participantes: ["Brasil", "Vários países"]
   },
   {
     id: 'norman401',
     nome: "Norman-401 - Sanções Ambientais",
     descricao: "Prevenção da Poluição por Embarcações e Plataformas",
     periodo: "2019-2024",
     orgao: "Marinha do Brasil",
     dados: [
       "Registros por distritos navais",
       "Incidentes com derramamento de óleo",
       "Identificação de embarcações",
       "Valores de multas",
       "Sistema Sisauto"
     ]
   },
   {
     id: 'vtmis',
     nome: "Sistema VTMIS - Ilha da Moela",
     descricao: "Sistema de Gerenciamento de Tráfego de Embarcações",
     ano: 2025,
     parceiros: ["Autoridade Portuária de Santos", "Marinha do Brasil"],
     local: "Guarujá, SP",
     equipamentos: [
       "Radar marítimo",
       "Estação meteorológica", 
       "Câmeras eletro-ópticas",
       "Antenas de comunicação"
     ]
   }
 ],

 recursos: [
   {
     nome: "Concórdia",
     url: "https://concordia.itamaraty.gov.br",
     orgao: "Ministério das Relações Exteriores",
     funcoes: [
       "Consulta de atos internacionais",
       "Textos em idiomas originais",
       "Status de ratificação"
     ]
   },
   {
     nome: "Cooperação Internacional",
     url: "https://www.gov.br/mre/pt-br/assuntos/cooperacao-internacional",
     subseções: [
       "Agência Brasileira de Cooperação",
       "Cooperação educacional",
       "Cooperação esportiva", 
       "Cooperação humanitária",
       "Cooperação técnica"
     ]
   },
   {
     nome: "Marinha do Brasil",
     url: "https://www.marinha.mil.br/",
     agencia: "https://www.agencia.marinha.mil.br/index.php/internacional"
   }
 ],

 modeloPedidoLAI: {
   titulo: "Modelo de Pedido LAI - Norman-401",
   itens: [
     "Ano de ocorrência e local da infração",
     "Tipo de infração cometida",
     "Identificação do navio infrator",
     "Valor das multas aplicadas",
     "Dados estatísticos consolidados por ano"
   ]
 }

};

// Componente Principal const AcordosInternacionaisApp = () => { 

 const [activeTab, setActiveTab] = useState('overview');
 const [searchTerm, setSearchTerm] = useState();
 const [selectedCase, setSelectedCase] = useState(null);
 const [dateRange, setDateRange] = useState({ inicio: , fim:  });
 const [pedidoText, setPedidoText] = useState();
 const [copied, setCopied] = useState(false);

 // Componente de Header
 const Header = () => (

 );

 // Componente de Navegação
 const Navigation = () => {
   const tabs = [
     { id: 'overview', label: 'Visão Geral', icon: Globe },
     { id: 'cases', label: 'Casos', icon: FileText },
     { id: 'resources', label: 'Recursos', icon: Database },
     { id: 'lai', label: 'Pedido LAI', icon: AlertCircle }
   ];

   return (

         {tabs.map(tab => {
           const Icon = tab.icon;
           return (
             <button
               key={tab.id}
               onClick={() => setActiveTab(tab.id)}
               className={`flex-1 flex items-center justify-center p-4 font-medium transition-all duration-300 ${
                 activeTab === tab.id 
                   ? 'bg-blue-600 text-white shadow-lg' 
                   : 'text-gray-600 hover:bg-gray-200'
               }`}
             >
               <Icon className="w-5 h-5 mr-2" />
               {tab.label}
             </button>
           );
         })}

   );
 };

 // Componente de Busca
 const SearchBar = () => (

       <Search className="absolute left-3 top-3 h-5 w-5 text-gray-400" />
       <input
         type="text"
         placeholder="Buscar acordos, países, termos..."
         value={searchTerm}
         onChange={(e) => setSearchTerm(e.target.value)}
         className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
       />

 );

 // Componente de Estatísticas
 const StatsCards = () => {
   const stats = [
     { label: 'Países Parceiros', value: '195+', icon: Users, color: 'bg-blue-500' },
     { label: 'Acordos Ativos', value: '1000+', icon: FileText, color: 'bg-green-500' },
     { label: 'Áreas de Cooperação', value: '50+', icon: Globe, color: 'bg-purple-500' }
   ];

   return (

       {stats.map((stat, index) => {
         const Icon = stat.icon;
         return (

                 <Icon className="h-8 w-8 text-white" />

{stat.label}

{stat.value}

         );
       })}

   );
 };

 // Componente de Definição
 const DefinitionCard = () => (

<FileText className="mr-2 h-6 w-6 text-blue-600" /> O que são Acordos Internacionais?

{ACORDOS_DATA.definicao.descricao}

Tipos Comuns:

    {ACORDOS_DATA.definicao.tipos.map((tipo, index) => ( 
  •                {tipo}
    • ))}

Características:

    {ACORDOS_DATA.definicao.caracteristicas.map((carac, index) => (
  • <CheckCircle className="w-4 h-4 text-green-500 mr-2" /> {carac}
    • ))} 
 );

 // Componente de Casos
 const CasesView = () => (

     {ACORDOS_DATA.casos.map((caso, index) => (

{caso.nome}

{caso.descricao}

             {caso.ano && (

                 <Calendar className="w-4 h-4 mr-1" />
                 {caso.ano}

             )}
             {caso.periodo && (

                 <Calendar className="w-4 h-4 mr-1" />
                 {caso.periodo}

             )}

         {caso.status && (

             
               <AlertCircle className="w-4 h-4 mr-1" />
               {caso.status}
             

         )}

         {caso.local && (

             <MapPin className="w-4 h-4 mr-2" />
             {caso.local}

         )}

         {caso.propostas && (

Propostas:

    {caso.propostas.map((proposta, idx) => (
  • <Shield className="w-4 h-4 text-green-500 mr-2" /> {proposta}
    • ))} 
         )}

         {caso.dados && (

Dados Coletados:

               {caso.dados.map((dado, idx) => (

                   <Database className="w-4 h-4 text-blue-500 mr-2" />
                   {dado}

               ))}

         )}

         {caso.equipamentos && (

Equipamentos:

               {caso.equipamentos.map((equip, idx) => (

                   <Shield className="w-4 h-4 text-purple-500 mr-2" />
                   {equip}

               ))}

         )}

         {(caso.participantes || caso.parceiros) && (

{caso.participantes ? 'Participantes:' : 'Parceiros:'} 

               {(caso.participantes || caso.parceiros).map((part, idx) => (
                 
                   {part}
                 
               ))}

         )}

     ))}

 );

 // Componente de Recursos
 const ResourcesView = () => (

     {ACORDOS_DATA.recursos.map((recurso, index) => (

<ExternalLink className="mr-2 h-6 w-6 text-blue-600" /> {recurso.nome} 

         {recurso.orgao && (

Órgão: {recurso.orgao}

         )}

         {recurso.funcoes && (

Funcionalidades:

    {recurso.funcoes.map((func, idx) => (
  • <CheckCircle className="w-4 h-4 text-green-500 mr-2" /> {func}
    • ))} 
         )}

         {recurso.subseções && (

Subseções:

               {recurso.subseções.map((sub, idx) => (

                   <FileText className="w-4 h-4 text-blue-500 mr-2" />
                   {sub}

               ))}

         )}

           <a 
             href={recurso.url} 
             target="_blank" 
             rel="noopener noreferrer"
             className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
           >
             <ExternalLink className="w-4 h-4 mr-2" />
             Acessar
           </a>
           {recurso.agencia && (
             <a 
               href={recurso.agencia} 
               target="_blank" 
               rel="noopener noreferrer"
               className="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
             >
               <ExternalLink className="w-4 h-4 mr-2" />
               Agência
             </a>
           )}

     ))}

 );

 // Componente de Pedido LAI
 const LAIRequestView = () => {
   const generateRequest = () => {
     const template = `Solicito dados referentes à aplicação da Norma da Autoridade Marítima para Prevenção da Poluição Ambiental por Embarcações e Instalações de Apoio – Norman-401, no período de ${dateRange.inicio ? new Date(dateRange.inicio).toLocaleDateString('pt-BR') : '[DD/MM/AAAA]'} a ${dateRange.fim ? new Date(dateRange.fim).toLocaleDateString('pt-BR') : '[DD/MM/AAAA]'}, com base na Lei nº 12.527/2011 (Lei de Acesso à Informação), sobre descumprimento de normas ambientais por embarcações internacionais no Brasil, incluindo:

${ACORDOS_DATA.modeloPedidoLAI.itens.map((item, index) => `${index + 1}. ${item};`).join('\n')}`; 

     setPedidoText(template);
   };

   const copyToClipboard = () => {
     navigator.clipboard.writeText(pedidoText);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   };

   return (

<AlertCircle className="mr-2 h-6 w-6 text-red-600" /> Gerador de Pedido LAI 

             <label className="block text-sm font-medium text-gray-700 mb-2">
               Data de Início
             </label>
             <input
               type="date"
               value={dateRange.inicio}
               onChange={(e) => setDateRange({...dateRange, inicio: e.target.value})}
               className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
             />

             <label className="block text-sm font-medium text-gray-700 mb-2">
               Data Final
             </label>
             <input
               type="date"
               value={dateRange.fim}
               onChange={(e) => setDateRange({...dateRange, fim: e.target.value})}
               className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
             />

         <button 
           onClick={generateRequest}
           className="w-full md:w-auto px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors mb-4"
         >
           Gerar Pedido
         </button>

         {pedidoText && (

             <label className="block text-sm font-medium text-gray-700 mb-2">
               Texto do Pedido:
             </label>
             <textarea
               value={pedidoText}
               onChange={(e) => setPedidoText(e.target.value)}
               rows={12}
               className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 font-mono text-sm"
             />
             <button 
               onClick={copyToClipboard}
               className="mt-2 flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
             >
               {copied ? <CheckCircle className="w-4 h-4 mr-2" /> : <Copy className="w-4 h-4 mr-2" />}
               {copied ? 'Copiado!' : 'Copiar Texto'}
             </button>

         )}

Itens Solicitados no Pedido

    {ACORDOS_DATA.modeloPedidoLAI.itens.map((item, index) => (
  • {index + 1} {item}
    • ))} 
   );
 };

 // Função para renderizar conteúdo baseado na aba ativa
 const renderContent = () => {
   switch(activeTab) {
     case 'overview':
       return (

           <SearchBar />
           <StatsCards />
           <DefinitionCard />

       );
     case 'cases':
       return <CasesView />;
     case 'resources':
       return <ResourcesView />;
     case 'lai':
       return <LAIRequestView />;
     default:
       return null;
   }
 };

 return (

     <Header />
     <Navigation />

       {renderContent()}

 );

};

export default AcordosInternacionaisApp;

Obtida de "https://wikilai.fiquemsabendo.com.br/index.php?title=Acordos_Internacionais&oldid=1159"