xertica-ui 2.2.1 → 2.3.0

package/components/examples/MapShowcase.tsx

@@ -1,471 +1,471 @@
-import React, { useState } from 'react';
-import { Map } from '../ui/map';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
-import { Badge } from '../ui/badge';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Alert, AlertDescription } from '../ui/alert';
-import { Info, Layers, MapPin, MousePointer2, Pencil } from 'lucide-react';
-import { Checkbox } from '../ui/checkbox';
-import { Label } from '../ui/label';
-import { Switch } from '../ui/switch';
-import { FilterableMapExample } from './FilterableMapExample';
-import { SimpleFilterableMap } from './SimpleFilterableMap';
-import { DrawingMapExample } from './DrawingMapExample';
-import { PageHeader } from '../ui/page-header';
-
-/**
- * MapShowcase - Componente de demonstração completo e organizado
- *
- * Organizado em 3 abas principais conforme diretrizes do Design System:
- * 1. Mapas Simples (Padrão, Layers, Compacto)
- * 2. Marcadores (Pins, Áreas, Personalização)
- * 3. Controles (Filtros, Controles Nativos)
- */
-
-export function MapShowcase() {
-  const [activeTab, setActiveTab] = useState('simple');
-  const [isTransitioning, setIsTransitioning] = useState(false);
-  const [apiKey, setApiKey] = useState('');
-  const [inputApiKey, setInputApiKey] = useState('');
-
-  // Estados para Layers
-  const [showTraffic, setShowTraffic] = useState(false);
-  const [showTransit, setShowTransit] = useState(false);
-  const [showBicycling, setShowBicycling] = useState(false);
-
-  // Estados para Controles Nativos
-  const [showZoomControl, setShowZoomControl] = useState(true);
-  const [showMapTypeControl, setShowMapTypeControl] = useState(false);
-  const [showStreetViewControl, setShowStreetViewControl] = useState(false);
-  const [showFullscreenControl, setShowFullscreenControl] = useState(true);
-
-  // Handler para troca de tabs com cleanup
-  const handleTabChange = (value: string) => {
-    if (value === activeTab) return;
-    setIsTransitioning(true);
-    setTimeout(() => {
-      setActiveTab(value);
-      setIsTransitioning(false);
-    }, 50);
-  };
-
-  return (
-    <div className="space-y-8">
-      {/* Header */}
-      {/* Header */}
-      <PageHeader
-        title="Mapas"
-        subtitle="Biblioteca de componentes de mapa para visualização de dados geoespaciais. Utiliza a API do Google Maps com estilização personalizada do Xertica UI."
-        actions={<Badge>Design System</Badge>}
-      />
-
-      {/* API Key Configuration */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Configuração da API Key</CardTitle>
-          <CardDescription>
-            Insira sua Google Maps API Key para renderizar os mapas abaixo.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex w-full max-w-md items-center space-x-2">
-            <Input
-              type="password"
-              placeholder="Cole sua Google Maps API Key aqui"
-              aria-label="Google Maps API Key"
-              value={inputApiKey}
-              onChange={e => setInputApiKey(e.target.value)}
-              className="max-w-md h-10"
-            />
-            <Button onClick={() => setApiKey(inputApiKey)}>Salvar</Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Tabs Principais */}
-      <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
-        <TabsList className="grid w-full grid-cols-4 mb-8">
-          <TabsTrigger value="simple">Mapas Simples</TabsTrigger>
-          <TabsTrigger value="markers">Marcadores</TabsTrigger>
-          <TabsTrigger value="controls">Controles</TabsTrigger>
-          <TabsTrigger value="drawing" className="flex items-center gap-2">
-            <Pencil className="w-3 h-3" /> Desenho
-          </TabsTrigger>
-        </TabsList>
-
-        {/* 1. Mapas Simples */}
-        <TabsContent value="simple" className="space-y-8">
-          {!isTransitioning && activeTab === 'simple' && (
-            <>
-              {/* Mapa Padrão */}
-              <Card>
-                <CardHeader>
-                  <CardTitle>Mapa Padrão</CardTitle>
-                  <CardDescription>
-                    Configuração básica do mapa centralizado em uma coordenada específica.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Map
-                    center={{ lat: -23.5505, lng: -46.6333 }}
-                    zoom={13}
-                    height="400px"
-                    apiKey={apiKey}
-                  />
-                </CardContent>
-              </Card>
-
-              {/* Mapa com Layers */}
-              <Card>
-                <CardHeader>
-                  <CardTitle>Camadas (Layers)</CardTitle>
-                  <CardDescription>
-                    Sobreposição de informações como tráfego, transporte público e ciclovias.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="flex flex-wrap gap-6 p-4 border rounded-lg bg-muted/50">
-                    <div className="flex items-center space-x-2">
-                      <Switch id="traffic" checked={showTraffic} onCheckedChange={setShowTraffic} />
-                      <Label htmlFor="traffic" className="flex items-center gap-2">
-                        <Layers className="w-4 h-4" /> Trânsito
-                      </Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <Switch id="transit" checked={showTransit} onCheckedChange={setShowTransit} />
-                      <Label htmlFor="transit" className="flex items-center gap-2">
-                        <Layers className="w-4 h-4" /> Transporte
-                      </Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <Switch
-                        id="bicycling"
-                        checked={showBicycling}
-                        onCheckedChange={setShowBicycling}
-                      />
-                      <Label htmlFor="bicycling" className="flex items-center gap-2">
-                        <Layers className="w-4 h-4" /> Ciclovias
-                      </Label>
-                    </div>
-                  </div>
-
-                  <Map
-                    center={{ lat: -23.5505, lng: -46.6333 }}
-                    zoom={12}
-                    height="500px"
-                    layers={{
-                      traffic: showTraffic,
-                      transit: showTransit,
-                      bicycling: showBicycling,
-                    }}
-                    apiKey={apiKey}
-                  />
-                </CardContent>
-              </Card>
-
-              {/* Mapas Compactos */}
-              <div className="grid md:grid-cols-3 gap-4">
-                <Card>
-                  <CardHeader className="p-4 pb-2">
-                    <CardTitle className="text-sm">São Paulo</CardTitle>
-                  </CardHeader>
-                  <CardContent className="p-4 pt-0">
-                    <Map
-                      center={{ lat: -23.5505, lng: -46.6333 }}
-                      zoom={11}
-                      height="200px"
-                      disableDefaultUI={true}
-                      apiKey={apiKey}
-                    />
-                  </CardContent>
-                </Card>
-                <Card>
-                  <CardHeader className="p-4 pb-2">
-                    <CardTitle className="text-sm">Rio de Janeiro</CardTitle>
-                  </CardHeader>
-                  <CardContent className="p-4 pt-0">
-                    <Map
-                      center={{ lat: -22.9068, lng: -43.1729 }}
-                      zoom={11}
-                      height="200px"
-                      disableDefaultUI={true}
-                      apiKey={apiKey}
-                    />
-                  </CardContent>
-                </Card>
-                <Card>
-                  <CardHeader className="p-4 pb-2">
-                    <CardTitle className="text-sm">New York</CardTitle>
-                  </CardHeader>
-                  <CardContent className="p-4 pt-0">
-                    <Map
-                      center={{ lat: 40.7128, lng: -74.006 }}
-                      zoom={11}
-                      height="200px"
-                      disableDefaultUI={true}
-                      apiKey={apiKey}
-                    />
-                  </CardContent>
-                </Card>
-              </div>
-            </>
-          )}
-        </TabsContent>
-
-        {/* 2. Marcadores */}
-        <TabsContent value="markers" className="space-y-8">
-          {!isTransitioning && activeTab === 'markers' && (
-            <>
-              {/* Marcadores e Pins */}
-              <Card>
-                <CardHeader>
-                  <CardTitle>Marcadores e Pins</CardTitle>
-                  <CardDescription>
-                    Exemplos de marcadores personalizados com diferentes cores e informações.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Map
-                    center={{ lat: -23.5505, lng: -46.6333 }}
-                    zoom={13}
-                    height="500px"
-                    apiKey={apiKey}
-                    markers={[
-                      {
-                        position: { lat: -23.5505, lng: -46.6333 },
-                        title: 'Principal',
-                        info: 'Marcador padrão',
-                        customColor: '#4F46E5',
-                      },
-                      {
-                        position: { lat: -23.54, lng: -46.64 },
-                        title: 'Secundário',
-                        info: 'Marcador de alerta',
-                        customColor: '#EF4444',
-                        icon: '!',
-                      },
-                      {
-                        position: { lat: -23.56, lng: -46.62 },
-                        title: 'Loja',
-                        info: 'Ponto de venda',
-                        customColor: '#10B981',
-                        icon: 'S',
-                      },
-                    ]}
-                  />
-                </CardContent>
-              </Card>
-
-              {/* Marcador com Conteúdo Rico */}
-              <Card>
-                <CardHeader>
-                  <CardTitle>Marcador com Ações</CardTitle>
-                  <CardDescription>
-                    Marcador interativo que exibe conteúdo rico (texto, imagem, botões) ao ser
-                    clicado.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Map
-                    center={{ lat: -23.5505, lng: -46.6333 }}
-                    zoom={13}
-                    height="500px"
-                    apiKey={apiKey}
-                    markers={[
-                      {
-                        position: { lat: -23.5505, lng: -46.6333 },
-                        label: '🏢',
-                        richContent: (
-                          <div className="p-4 max-w-[260px]">
-                            <div className="flex items-center justify-between mb-2">
-                              <h4 className="font-semibold text-base">Xertica HQ</h4>
-                              <Badge variant="outline" className="text-[10px] h-5">
-                                Open
-                              </Badge>
-                            </div>
-                            <div className="w-full h-32 bg-muted rounded-md mb-3 overflow-hidden relative">
-                              <div className="absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" />
-                              <div className="absolute inset-0 flex items-center justify-center text-white font-medium">
-                                Office View
-                              </div>
-                            </div>
-                            <p className="text-sm text-muted-foreground mb-3 leading-relaxed">
-                              Sede principal em São Paulo. Espaço moderno para reuniões e eventos.
-                            </p>
-                            <div className="grid grid-cols-2 gap-2">
-                              <Button size="sm" className="w-full h-8 text-xs shadow-sm">
-                                Navegar
-                              </Button>
-                              <Button
-                                size="sm"
-                                variant="outline"
-                                className="w-full h-8 text-xs bg-background"
-                              >
-                                Detalhes
-                              </Button>
-                            </div>
-                          </div>
-                        ),
-                      },
-                    ]}
-                  />
-                </CardContent>
-              </Card>
-
-              {/* Áreas e Polígonos */}
-              <Card>
-                <CardHeader>
-                  <CardTitle>Áreas e Zonas</CardTitle>
-                  <CardDescription>
-                    Delimitação de áreas geográficas usando círculos e polígonos.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Map
-                    center={{ lat: -23.5505, lng: -46.6333 }}
-                    zoom={12}
-                    height="500px"
-                    apiKey={apiKey}
-                    markers={[
-                      {
-                        position: { lat: -23.5505, lng: -46.6333 },
-                        title: 'Centro da Zona',
-                        info: 'Raio de 3km',
-                        customColor: '#6366F1',
-                      },
-                    ]}
-                    circle={{
-                      center: { lat: -23.5505, lng: -46.6333 },
-                      radius: 3000,
-                      fillColor: '#6366F1',
-                      strokeColor: '#4F46E5',
-                    }}
-                    polygon={{
-                      paths: [
-                        [
-                          { lat: -23.52, lng: -46.6 },
-                          { lat: -23.52, lng: -46.66 },
-                          { lat: -23.58, lng: -46.66 },
-                          { lat: -23.58, lng: -46.6 },
-                        ],
-                      ],
-                      fillColor: '#10B981',
-                      strokeColor: '#059669',
-                    }}
-                  />
-                </CardContent>
-              </Card>
-            </>
-          )}
-        </TabsContent>
-
-        {/* 3. Controles */}
-        <TabsContent value="controls" className="space-y-8">
-          {!isTransitioning && activeTab === 'controls' && (
-            <>
-              {/* Controles Nativos */}
-              <Card>
-                <CardHeader>
-                  <CardTitle>Controles do Mapa</CardTitle>
-                  <CardDescription>
-                    Personalize a interface do mapa ativando ou desativando controles nativos.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 border rounded-lg bg-muted/50">
-                    <div className="flex items-center space-x-2">
-                      <Checkbox
-                        id="zoom"
-                        checked={showZoomControl}
-                        onCheckedChange={c => setShowZoomControl(!!c)}
-                      />
-                      <Label htmlFor="zoom">Zoom Control</Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <Checkbox
-                        id="maptype"
-                        checked={showMapTypeControl}
-                        onCheckedChange={c => setShowMapTypeControl(!!c)}
-                      />
-                      <Label htmlFor="maptype">Map Type</Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <Checkbox
-                        id="streetview"
-                        checked={showStreetViewControl}
-                        onCheckedChange={c => setShowStreetViewControl(!!c)}
-                      />
-                      <Label htmlFor="streetview">Street View</Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <Checkbox
-                        id="fullscreen"
-                        checked={showFullscreenControl}
-                        onCheckedChange={c => setShowFullscreenControl(!!c)}
-                      />
-                      <Label htmlFor="fullscreen">Fullscreen</Label>
-                    </div>
-                  </div>
-
-                  <Map
-                    center={{ lat: -23.5505, lng: -46.6333 }}
-                    zoom={13}
-                    height="400px"
-                    apiKey={apiKey}
-                    zoomControl={showZoomControl}
-                    mapTypeControl={showMapTypeControl}
-                    streetViewControl={showStreetViewControl}
-                    fullscreenControl={showFullscreenControl}
-                  />
-                </CardContent>
-              </Card>
-
-              {/* Filtros Customizados */}
-              <Card>
-                <CardHeader>
-                  <CardTitle>Filtros Interativos</CardTitle>
-                  <CardDescription>
-                    Exemplo avançado de mapa com controles customizados para filtragem de
-                    marcadores.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <FilterableMapExample apiKey={apiKey} />
-                </CardContent>
-              </Card>
-            </>
-          )}
-        </TabsContent>
-
-        {/* 4. Desenho */}
-        <TabsContent value="drawing" className="space-y-8">
-          {!isTransitioning && activeTab === 'drawing' && <DrawingMapExample apiKey={apiKey} />}
-        </TabsContent>
-      </Tabs>
-
-      {/* Footer Info */}
-      <div className="grid md:grid-cols-3 gap-6 pt-8 border-t">
-        <div className="space-y-2">
-          <h4 className="font-semibold text-sm">Documentação</h4>
-          <p className="text-xs text-muted-foreground">
-            Verifique <code>MAP_SETUP.md</code> para configuração inicial e requisitos de API.
-          </p>
-        </div>
-        <div className="space-y-2">
-          <h4 className="font-semibold text-sm">Performance</h4>
-          <p className="text-xs text-muted-foreground">
-            Utiliza carregamento assíncrono e AdvancedMarkerElement para melhor desempenho.
-          </p>
-        </div>
-        <div className="space-y-2">
-          <h4 className="font-semibold text-sm">Design System</h4>
-          <p className="text-xs text-muted-foreground">
-            Componentes seguem estritamente as variáveis de tokens do <code>globals.css</code>.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}
+import React, { useState } from 'react';
+import { Map } from '../ui/map';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Alert, AlertDescription } from '../ui/alert';
+import { Info, Layers, MapPin, MousePointer2, Pencil } from 'lucide-react';
+import { Checkbox } from '../ui/checkbox';
+import { Label } from '../ui/label';
+import { Switch } from '../ui/switch';
+import { FilterableMapExample } from './FilterableMapExample';
+import { SimpleFilterableMap } from './SimpleFilterableMap';
+import { DrawingMapExample } from './DrawingMapExample';
+import { PageHeader } from '../ui/page-header';
+
+/**
+ * MapShowcase - Componente de demonstração completo e organizado
+ *
+ * Organizado em 3 abas principais conforme diretrizes do Design System:
+ * 1. Mapas Simples (Padrão, Layers, Compacto)
+ * 2. Marcadores (Pins, Áreas, Personalização)
+ * 3. Controles (Filtros, Controles Nativos)
+ */
+
+export function MapShowcase() {
+  const [activeTab, setActiveTab] = useState('simple');
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [apiKey, setApiKey] = useState('');
+  const [inputApiKey, setInputApiKey] = useState('');
+
+  // Estados para Layers
+  const [showTraffic, setShowTraffic] = useState(false);
+  const [showTransit, setShowTransit] = useState(false);
+  const [showBicycling, setShowBicycling] = useState(false);
+
+  // Estados para Controles Nativos
+  const [showZoomControl, setShowZoomControl] = useState(true);
+  const [showMapTypeControl, setShowMapTypeControl] = useState(false);
+  const [showStreetViewControl, setShowStreetViewControl] = useState(false);
+  const [showFullscreenControl, setShowFullscreenControl] = useState(true);
+
+  // Handler para troca de tabs com cleanup
+  const handleTabChange = (value: string) => {
+    if (value === activeTab) return;
+    setIsTransitioning(true);
+    setTimeout(() => {
+      setActiveTab(value);
+      setIsTransitioning(false);
+    }, 50);
+  };
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      {/* Header */}
+      <PageHeader
+        title="Mapas"
+        subtitle="Biblioteca de componentes de mapa para visualização de dados geoespaciais. Utiliza a API do Google Maps com estilização personalizada do Xertica UI."
+        actions={<Badge>Design System</Badge>}
+      />
+
+      {/* API Key Configuration */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Configuração da API Key</CardTitle>
+          <CardDescription>
+            Insira sua Google Maps API Key para renderizar os mapas abaixo.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex w-full max-w-md items-center space-x-2">
+            <Input
+              type="password"
+              placeholder="Cole sua Google Maps API Key aqui"
+              aria-label="Google Maps API Key"
+              value={inputApiKey}
+              onChange={e => setInputApiKey(e.target.value)}
+              className="max-w-md h-10"
+            />
+            <Button onClick={() => setApiKey(inputApiKey)}>Salvar</Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Tabs Principais */}
+      <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
+        <TabsList className="grid w-full grid-cols-4 mb-8">
+          <TabsTrigger value="simple">Mapas Simples</TabsTrigger>
+          <TabsTrigger value="markers">Marcadores</TabsTrigger>
+          <TabsTrigger value="controls">Controles</TabsTrigger>
+          <TabsTrigger value="drawing" className="flex items-center gap-2">
+            <Pencil className="w-3 h-3" /> Desenho
+          </TabsTrigger>
+        </TabsList>
+
+        {/* 1. Mapas Simples */}
+        <TabsContent value="simple" className="space-y-8">
+          {!isTransitioning && activeTab === 'simple' && (
+            <>
+              {/* Mapa Padrão */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Mapa Padrão</CardTitle>
+                  <CardDescription>
+                    Configuração básica do mapa centralizado em uma coordenada específica.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Map
+                    center={{ lat: -23.5505, lng: -46.6333 }}
+                    zoom={13}
+                    height="400px"
+                    apiKey={apiKey}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* Mapa com Layers */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Camadas (Layers)</CardTitle>
+                  <CardDescription>
+                    Sobreposição de informações como tráfego, transporte público e ciclovias.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="flex flex-wrap gap-6 p-4 border rounded-lg bg-muted/50">
+                    <div className="flex items-center space-x-2">
+                      <Switch id="traffic" checked={showTraffic} onCheckedChange={setShowTraffic} />
+                      <Label htmlFor="traffic" className="flex items-center gap-2">
+                        <Layers className="w-4 h-4" /> Trânsito
+                      </Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <Switch id="transit" checked={showTransit} onCheckedChange={setShowTransit} />
+                      <Label htmlFor="transit" className="flex items-center gap-2">
+                        <Layers className="w-4 h-4" /> Transporte
+                      </Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <Switch
+                        id="bicycling"
+                        checked={showBicycling}
+                        onCheckedChange={setShowBicycling}
+                      />
+                      <Label htmlFor="bicycling" className="flex items-center gap-2">
+                        <Layers className="w-4 h-4" /> Ciclovias
+                      </Label>
+                    </div>
+                  </div>
+
+                  <Map
+                    center={{ lat: -23.5505, lng: -46.6333 }}
+                    zoom={12}
+                    height="500px"
+                    layers={{
+                      traffic: showTraffic,
+                      transit: showTransit,
+                      bicycling: showBicycling,
+                    }}
+                    apiKey={apiKey}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* Mapas Compactos */}
+              <div className="grid md:grid-cols-3 gap-4">
+                <Card>
+                  <CardHeader className="p-4 pb-2">
+                    <CardTitle className="text-sm">São Paulo</CardTitle>
+                  </CardHeader>
+                  <CardContent className="p-4 pt-0">
+                    <Map
+                      center={{ lat: -23.5505, lng: -46.6333 }}
+                      zoom={11}
+                      height="200px"
+                      disableDefaultUI={true}
+                      apiKey={apiKey}
+                    />
+                  </CardContent>
+                </Card>
+                <Card>
+                  <CardHeader className="p-4 pb-2">
+                    <CardTitle className="text-sm">Rio de Janeiro</CardTitle>
+                  </CardHeader>
+                  <CardContent className="p-4 pt-0">
+                    <Map
+                      center={{ lat: -22.9068, lng: -43.1729 }}
+                      zoom={11}
+                      height="200px"
+                      disableDefaultUI={true}
+                      apiKey={apiKey}
+                    />
+                  </CardContent>
+                </Card>
+                <Card>
+                  <CardHeader className="p-4 pb-2">
+                    <CardTitle className="text-sm">New York</CardTitle>
+                  </CardHeader>
+                  <CardContent className="p-4 pt-0">
+                    <Map
+                      center={{ lat: 40.7128, lng: -74.006 }}
+                      zoom={11}
+                      height="200px"
+                      disableDefaultUI={true}
+                      apiKey={apiKey}
+                    />
+                  </CardContent>
+                </Card>
+              </div>
+            </>
+          )}
+        </TabsContent>
+
+        {/* 2. Marcadores */}
+        <TabsContent value="markers" className="space-y-8">
+          {!isTransitioning && activeTab === 'markers' && (
+            <>
+              {/* Marcadores e Pins */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Marcadores e Pins</CardTitle>
+                  <CardDescription>
+                    Exemplos de marcadores personalizados com diferentes cores e informações.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Map
+                    center={{ lat: -23.5505, lng: -46.6333 }}
+                    zoom={13}
+                    height="500px"
+                    apiKey={apiKey}
+                    markers={[
+                      {
+                        position: { lat: -23.5505, lng: -46.6333 },
+                        title: 'Principal',
+                        info: 'Marcador padrão',
+                        customColor: '#4F46E5',
+                      },
+                      {
+                        position: { lat: -23.54, lng: -46.64 },
+                        title: 'Secundário',
+                        info: 'Marcador de alerta',
+                        customColor: '#EF4444',
+                        icon: '!',
+                      },
+                      {
+                        position: { lat: -23.56, lng: -46.62 },
+                        title: 'Loja',
+                        info: 'Ponto de venda',
+                        customColor: '#10B981',
+                        icon: 'S',
+                      },
+                    ]}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* Marcador com Conteúdo Rico */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Marcador com Ações</CardTitle>
+                  <CardDescription>
+                    Marcador interativo que exibe conteúdo rico (texto, imagem, botões) ao ser
+                    clicado.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Map
+                    center={{ lat: -23.5505, lng: -46.6333 }}
+                    zoom={13}
+                    height="500px"
+                    apiKey={apiKey}
+                    markers={[
+                      {
+                        position: { lat: -23.5505, lng: -46.6333 },
+                        label: '🏢',
+                        richContent: (
+                          <div className="p-4 max-w-[260px]">
+                            <div className="flex items-center justify-between mb-2">
+                              <h4 className="font-semibold text-base">Xertica HQ</h4>
+                              <Badge variant="outline" className="text-[10px] h-5">
+                                Open
+                              </Badge>
+                            </div>
+                            <div className="w-full h-32 bg-muted rounded-md mb-3 overflow-hidden relative">
+                              <div className="absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" />
+                              <div className="absolute inset-0 flex items-center justify-center text-white font-medium">
+                                Office View
+                              </div>
+                            </div>
+                            <p className="text-sm text-muted-foreground mb-3 leading-relaxed">
+                              Sede principal em São Paulo. Espaço moderno para reuniões e eventos.
+                            </p>
+                            <div className="grid grid-cols-2 gap-2">
+                              <Button size="sm" className="w-full h-8 text-xs shadow-sm">
+                                Navegar
+                              </Button>
+                              <Button
+                                size="sm"
+                                variant="outline"
+                                className="w-full h-8 text-xs bg-background"
+                              >
+                                Detalhes
+                              </Button>
+                            </div>
+                          </div>
+                        ),
+                      },
+                    ]}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* Áreas e Polígonos */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Áreas e Zonas</CardTitle>
+                  <CardDescription>
+                    Delimitação de áreas geográficas usando círculos e polígonos.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Map
+                    center={{ lat: -23.5505, lng: -46.6333 }}
+                    zoom={12}
+                    height="500px"
+                    apiKey={apiKey}
+                    markers={[
+                      {
+                        position: { lat: -23.5505, lng: -46.6333 },
+                        title: 'Centro da Zona',
+                        info: 'Raio de 3km',
+                        customColor: '#6366F1',
+                      },
+                    ]}
+                    circle={{
+                      center: { lat: -23.5505, lng: -46.6333 },
+                      radius: 3000,
+                      fillColor: '#6366F1',
+                      strokeColor: '#4F46E5',
+                    }}
+                    polygon={{
+                      paths: [
+                        [
+                          { lat: -23.52, lng: -46.6 },
+                          { lat: -23.52, lng: -46.66 },
+                          { lat: -23.58, lng: -46.66 },
+                          { lat: -23.58, lng: -46.6 },
+                        ],
+                      ],
+                      fillColor: '#10B981',
+                      strokeColor: '#059669',
+                    }}
+                  />
+                </CardContent>
+              </Card>
+            </>
+          )}
+        </TabsContent>
+
+        {/* 3. Controles */}
+        <TabsContent value="controls" className="space-y-8">
+          {!isTransitioning && activeTab === 'controls' && (
+            <>
+              {/* Controles Nativos */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Controles do Mapa</CardTitle>
+                  <CardDescription>
+                    Personalize a interface do mapa ativando ou desativando controles nativos.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 border rounded-lg bg-muted/50">
+                    <div className="flex items-center space-x-2">
+                      <Checkbox
+                        id="zoom"
+                        checked={showZoomControl}
+                        onCheckedChange={c => setShowZoomControl(!!c)}
+                      />
+                      <Label htmlFor="zoom">Zoom Control</Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <Checkbox
+                        id="maptype"
+                        checked={showMapTypeControl}
+                        onCheckedChange={c => setShowMapTypeControl(!!c)}
+                      />
+                      <Label htmlFor="maptype">Map Type</Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <Checkbox
+                        id="streetview"
+                        checked={showStreetViewControl}
+                        onCheckedChange={c => setShowStreetViewControl(!!c)}
+                      />
+                      <Label htmlFor="streetview">Street View</Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <Checkbox
+                        id="fullscreen"
+                        checked={showFullscreenControl}
+                        onCheckedChange={c => setShowFullscreenControl(!!c)}
+                      />
+                      <Label htmlFor="fullscreen">Fullscreen</Label>
+                    </div>
+                  </div>
+
+                  <Map
+                    center={{ lat: -23.5505, lng: -46.6333 }}
+                    zoom={13}
+                    height="400px"
+                    apiKey={apiKey}
+                    zoomControl={showZoomControl}
+                    mapTypeControl={showMapTypeControl}
+                    streetViewControl={showStreetViewControl}
+                    fullscreenControl={showFullscreenControl}
+                  />
+                </CardContent>
+              </Card>
+
+              {/* Filtros Customizados */}
+              <Card>
+                <CardHeader>
+                  <CardTitle>Filtros Interativos</CardTitle>
+                  <CardDescription>
+                    Exemplo avançado de mapa com controles customizados para filtragem de
+                    marcadores.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <FilterableMapExample apiKey={apiKey} />
+                </CardContent>
+              </Card>
+            </>
+          )}
+        </TabsContent>
+
+        {/* 4. Desenho */}
+        <TabsContent value="drawing" className="space-y-8">
+          {!isTransitioning && activeTab === 'drawing' && <DrawingMapExample apiKey={apiKey} />}
+        </TabsContent>
+      </Tabs>
+
+      {/* Footer Info */}
+      <div className="grid md:grid-cols-3 gap-6 pt-8 border-t">
+        <div className="space-y-2">
+          <h4 className="font-semibold text-sm">Documentação</h4>
+          <p className="text-xs text-muted-foreground">
+            Verifique <code>MAP_SETUP.md</code> para configuração inicial e requisitos de API.
+          </p>
+        </div>
+        <div className="space-y-2">
+          <h4 className="font-semibold text-sm">Performance</h4>
+          <p className="text-xs text-muted-foreground">
+            Utiliza carregamento assíncrono e AdvancedMarkerElement para melhor desempenho.
+          </p>
+        </div>
+        <div className="space-y-2">
+          <h4 className="font-semibold text-sm">Design System</h4>
+          <p className="text-xs text-muted-foreground">
+            Componentes seguem estritamente as variáveis de tokens do <code>globals.css</code>.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}