xertica-ui 2.2.0 → 2.3.0

package/components/examples/FilterableMapExample.tsx

@@ -1,393 +1,393 @@
-import React, { useState, useMemo } from 'react';
-import { Map } from '../ui/map';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
-import { Badge } from '../ui/badge';
-import { Button } from '../ui/button';
-import { Checkbox } from '../ui/checkbox';
-import { Label } from '../ui/label';
-import {
-  Utensils,
-  Hotel,
-  MapPin,
-  Landmark,
-  ShoppingBag,
-  Coffee,
-  X,
-  Filter,
-  type LucideIcon,
-} from 'lucide-react';
-import { cn } from '../shared/utils';
-
-/**
- * Exemplo avançado de mapa com marcadores personalizados e filtros por grupos
- * Demonstra como criar marcadores com cores e ícones distintos que podem ser filtrados
- * IMPORTANTE: Usa ícones Lucide com cores sólidas para contraste com fundos coloridos
- */
-
-// Helper para criar SVG string de ícones Lucide manualmente
-function createLucideIconSvg(iconName: string): string {
-  // SVG paths para os ícones Lucide usados
-  const iconPaths: Record<string, string> = {
-    utensils:
-      '<path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"></path><path d="M7 2v20"></path><path d="M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"></path>',
-    hotel:
-      '<path d="M18 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z"></path><path d="M8 6h8"></path><path d="M8 10h8"></path><path d="M8 14h8"></path><path d="M8 18h8"></path>',
-    landmark:
-      '<path d="m3 21 18-18"></path><path d="M9 15V6h6v9"></path><path d="M12 3v3"></path><path d="M3 15h18"></path><path d="M6 21v-6"></path><path d="M18 21v-6"></path>',
-    shopping:
-      '<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"></path><path d="M3 6h18"></path><path d="M16 10a4 4 0 0 1-8 0"></path>',
-    coffee:
-      '<path d="M17 8h1a4 4 0 1 1 0 8h-1"></path><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"></path><line x1="6" x2="6" y1="2" y2="4"></line><line x1="10" x2="10" y1="2" y2="4"></line><line x1="14" x2="14" y1="2" y2="4"></line>',
-  };
-
-  const path = iconPaths[iconName] || '';
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">${path}</svg>`;
-}
-
-// Definir tipos de grupos com cores e ícones Lucide
-export const markerGroups = {
-  restaurant: {
-    id: 'restaurant',
-    name: 'Restaurantes',
-    color: 'var(--destructive)', // red
-    iconColor: '#FFFFFF', // white para contraste
-    iconName: 'utensils',
-    icon: Utensils,
-  },
-  hotel: {
-    id: 'hotel',
-    name: 'Hotéis',
-    color: 'var(--info)', // blue
-    iconColor: '#FFFFFF',
-    iconName: 'hotel',
-    icon: Hotel,
-  },
-  landmark: {
-    id: 'landmark',
-    name: 'Pontos Turísticos',
-    color: 'var(--success)', // green
-    iconColor: '#FFFFFF',
-    iconName: 'landmark',
-    icon: Landmark,
-  },
-  shopping: {
-    id: 'shopping',
-    name: 'Compras',
-    color: 'var(--warning)', // orange
-    iconColor: '#FFFFFF',
-    iconName: 'shopping',
-    icon: ShoppingBag,
-  },
-  cafe: {
-    id: 'cafe',
-    name: 'Cafeterias',
-    color: 'var(--primary)', // purple
-    iconColor: '#FFFFFF',
-    iconName: 'coffee',
-    icon: Coffee,
-  },
-} as const;
-
-export type MarkerGroupId = keyof typeof markerGroups;
-
-// Dados de exemplo com diferentes grupos
-const sampleLocations = [
-  // Restaurantes
-  {
-    position: { lat: -23.5505, lng: -46.6333 },
-    title: 'Restaurante Italiano',
-    info: 'Melhor pizza da cidade',
-    group: 'restaurant' as MarkerGroupId,
-  },
-  {
-    position: { lat: -23.5485, lng: -46.635 },
-    title: 'Sushi Bar',
-    info: 'Comida japonesa autêntica',
-    group: 'restaurant' as MarkerGroupId,
-  },
-  {
-    position: { lat: -23.552, lng: -46.631 },
-    title: 'Churrascaria Premium',
-    info: 'Rodízio tradicional brasileiro',
-    group: 'restaurant' as MarkerGroupId,
-  },
-  // Hotéis
-  {
-    position: { lat: -23.5475, lng: -46.6361 },
-    title: 'Hotel Luxo',
-    info: '5 estrelas - Vista panorâmica',
-    group: 'hotel' as MarkerGroupId,
-  },
-  {
-    position: { lat: -23.553, lng: -46.634 },
-    title: 'Hotel Boutique',
-    info: 'Design moderno e aconchegante',
-    group: 'hotel' as MarkerGroupId,
-  },
-  // Pontos Turísticos
-  {
-    position: { lat: -23.5613, lng: -46.6563 },
-    title: 'Parque Ibirapuera',
-    info: 'Maior parque urbano da cidade',
-    group: 'landmark' as MarkerGroupId,
-  },
-  {
-    position: { lat: -23.5558, lng: -46.6396 },
-    title: 'MASP',
-    info: 'Museu de Arte de São Paulo',
-    group: 'landmark' as MarkerGroupId,
-  },
-  {
-    position: { lat: -23.5489, lng: -46.6388 },
-    title: 'Avenida Paulista',
-    info: 'Centro financeiro e cultural',
-    group: 'landmark' as MarkerGroupId,
-  },
-  // Shopping
-  {
-    position: { lat: -23.5465, lng: -46.64 },
-    title: 'Shopping Center',
-    info: 'Mais de 300 lojas',
-    group: 'shopping' as MarkerGroupId,
-  },
-  {
-    position: { lat: -23.554, lng: -46.638 },
-    title: 'Galeria de Arte',
-    info: 'Arte contemporânea e design',
-    group: 'shopping' as MarkerGroupId,
-  },
-  // Cafeterias
-  {
-    position: { lat: -23.5495, lng: -46.6345 },
-    title: 'Café Artesanal',
-    info: 'Café especial e brunch',
-    group: 'cafe' as MarkerGroupId,
-  },
-  {
-    position: { lat: -23.551, lng: -46.637 },
-    title: 'Coffee House',
-    info: 'Café gourmet e wi-fi',
-    group: 'cafe' as MarkerGroupId,
-  },
-  {
-    position: { lat: -23.5525, lng: -46.6355 },
-    title: 'Café Cultural',
-    info: 'Livros e café',
-    group: 'cafe' as MarkerGroupId,
-  },
-];
-
-/**
- * Componente de Mapa com Filtro de Grupos
- * Permite filtrar marcadores por categorias com interface integrada no mapa
- * COMPACTO: Usa checkboxes para economia de espaço
- */
-export interface FilterableMapExampleProps {
-  apiKey?: string;
-}
-
-export function FilterableMapExample({ apiKey }: FilterableMapExampleProps) {
-  const [activeFilters, setActiveFilters] = useState<Set<MarkerGroupId>>(
-    new Set(Object.keys(markerGroups) as MarkerGroupId[])
-  );
-  const [showFilters, setShowFilters] = useState(true);
-
-  // Filtrar locais baseado nos filtros ativos
-  const filteredLocations = useMemo(() => {
-    return sampleLocations.filter(location => activeFilters.has(location.group));
-  }, [activeFilters]);
-
-  // Toggle de filtro individual
-  const toggleFilter = (groupId: MarkerGroupId) => {
-    setActiveFilters(prev => {
-      const newFilters = new Set(prev);
-      if (newFilters.has(groupId)) {
-        newFilters.delete(groupId);
-      } else {
-        newFilters.add(groupId);
-      }
-      return newFilters;
-    });
-  };
-
-  // Selecionar/Desselecionar todos
-  const toggleAll = () => {
-    if (activeFilters.size === Object.keys(markerGroups).length) {
-      setActiveFilters(new Set());
-    } else {
-      setActiveFilters(new Set(Object.keys(markerGroups) as MarkerGroupId[]));
-    }
-  };
-
-  // Preparar marcadores com cores personalizadas e ícones
-  const markersWithCustomization = filteredLocations.map(location => ({
-    ...location,
-    customColor: markerGroups[location.group].color,
-    iconSvg: createLucideIconSvg(markerGroups[location.group].iconName),
-    iconColor: markerGroups[location.group].iconColor,
-  }));
-
-  // Contar marcadores por grupo
-  const getGroupCount = (groupId: MarkerGroupId) => {
-    return sampleLocations.filter(loc => loc.group === groupId).length;
-  };
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <MapPin className="w-5 h-5 text-primary" />
-          <h3>Filtro por Categorias</h3>
-        </div>
-        <Badge variant="secondary">
-          {filteredLocations.length} de {sampleLocations.length} locais
-        </Badge>
-      </div>
-
-      <p className="text-muted-foreground">
-        Use os filtros compactos no canto superior esquerdo do mapa para visualizar marcadores por
-        categoria
-      </p>
-
-      {/* Container do Mapa com Filtros Integrados */}
-      <div className="relative">
-        <Map
-          center={{ lat: -23.5505, lng: -46.6333 }}
-          zoom={14}
-          markers={markersWithCustomization}
-          height="500px"
-          zoomControl={true}
-          fullscreenControl={true}
-          apiKey={apiKey}
-        />
-        {/* Painel de Filtros COMPACTO Integrado no Mapa */}
-        <div
-          className={cn(
-            'absolute top-4 left-4 z-10 transition-all duration-300',
-            showFilters ? 'translate-x-0' : '-translate-x-full'
-          )}
-        >
-          <div className="p-2.5 rounded-lg shadow-[var(--shadow-elevation-sm)] bg-card border border-border max-w-[220px]">
-            <div className="flex items-center justify-between mb-2 gap-2">
-              <div className="flex items-center gap-1.5">
-                <Filter className="w-3.5 h-3.5 text-foreground" />
-                <span className="text-sm text-foreground">Filtros</span>
-              </div>
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={() => setShowFilters(false)}
-                className="h-5 w-5 p-0"
-              >
-                <X className="w-3 h-3" />
-              </Button>
-            </div>
-
-            <div className="space-y-1.5">
-              {/* Checkbox Todos */}
-              <div className="flex items-center space-x-2 py-0.5">
-                <Checkbox
-                  id="filter-all"
-                  checked={activeFilters.size === Object.keys(markerGroups).length}
-                  onCheckedChange={toggleAll}
-                />
-                <Label
-                  htmlFor="filter-all"
-                  className="flex items-center gap-1.5 cursor-pointer text-sm"
-                >
-                  <MapPin className="w-3.5 h-3.5" />
-                  Todos
-                  <Badge variant="secondary" className="text-xs h-4 px-1">
-                    {sampleLocations.length}
-                  </Badge>
-                </Label>
-              </div>
-
-              {/* Checkboxes de Filtro por Grupo */}
-              {Object.entries(markerGroups).map(([id, group]) => {
-                const groupId = id as MarkerGroupId;
-                const Icon = group.icon;
-                const isActive = activeFilters.has(groupId);
-                const count = getGroupCount(groupId);
-
-                return (
-                  <div key={id} className="flex items-center space-x-2 py-0.5">
-                    <Checkbox
-                      id={`filter-${id}`}
-                      checked={isActive}
-                      onCheckedChange={() => toggleFilter(groupId)}
-                    />
-                    <Label
-                      htmlFor={`filter-${id}`}
-                      className="flex items-center gap-1.5 cursor-pointer text-sm"
-                    >
-                      <Icon className="w-3.5 h-3.5" style={{ color: group.color }} />
-                      <span className={isActive ? 'text-foreground' : 'text-muted-foreground'}>
-                        {group.name}
-                      </span>
-                      <Badge variant="outline" className="text-xs h-4 px-1">
-                        {count}
-                      </Badge>
-                    </Label>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        </div>
-
-        {/* Botão para mostrar filtros quando estão escondidos */}
-        {!showFilters && (
-          <Button
-            size="sm"
-            onClick={() => setShowFilters(true)}
-            className="absolute top-4 left-4 z-10 h-8 bg-primary text-primary-foreground"
-          >
-            <Filter className="w-3.5 h-3.5 mr-1.5" />
-            Filtros
-          </Button>
-        )}
-      </div>
-
-      {/* Legenda Horizontal */}
-      <div className="flex flex-wrap gap-3 justify-center pt-2 border-t border-border">
-        {Object.entries(markerGroups).map(([id, group]) => {
-          const Icon = group.icon;
-          const count = getGroupCount(id as MarkerGroupId);
-          return (
-            <div key={id} className="flex items-center gap-2 px-3 py-1 rounded-lg bg-muted">
-              <div className="w-3 h-3 rounded-full" style={{ backgroundColor: group.color }} />
-              <Icon className="w-4 h-4" style={{ color: group.color }} />
-              <span className="text-sm" style={{ color: 'var(--foreground)' }}>
-                {group.name}
-              </span>
-              <Badge variant="secondary" className="text-xs h-5">
-                {count}
-              </Badge>
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Estatísticas */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-        <div className="text-center p-3 rounded-lg bg-muted">
-          <p className="text-muted-foreground">Total de Locais</p>
-          <p className="text-2xl text-foreground">{sampleLocations.length}</p>
-        </div>
-        <div className="text-center p-3 rounded-lg bg-muted">
-          <p className="text-muted-foreground">Visíveis</p>
-          <p className="text-2xl text-primary">{filteredLocations.length}</p>
-        </div>
-        <div className="text-center p-3 rounded-lg bg-muted">
-          <p className="text-muted-foreground">Categorias</p>
-          <p className="text-2xl text-foreground">{Object.keys(markerGroups).length}</p>
-        </div>
-        <div className="text-center p-3 rounded-lg bg-muted">
-          <p className="text-muted-foreground">Filtros Ativos</p>
-          <p className="text-2xl text-chart-2">{activeFilters.size}</p>
-        </div>
-      </div>
-    </div>
-  );
-}
+import React, { useState, useMemo } from 'react';
+import { Map } from '../ui/map';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import { Checkbox } from '../ui/checkbox';
+import { Label } from '../ui/label';
+import {
+  Utensils,
+  Hotel,
+  MapPin,
+  Landmark,
+  ShoppingBag,
+  Coffee,
+  X,
+  Filter,
+  type LucideIcon,
+} from 'lucide-react';
+import { cn } from '../shared/utils';
+
+/**
+ * Exemplo avançado de mapa com marcadores personalizados e filtros por grupos
+ * Demonstra como criar marcadores com cores e ícones distintos que podem ser filtrados
+ * IMPORTANTE: Usa ícones Lucide com cores sólidas para contraste com fundos coloridos
+ */
+
+// Helper para criar SVG string de ícones Lucide manualmente
+function createLucideIconSvg(iconName: string): string {
+  // SVG paths para os ícones Lucide usados
+  const iconPaths: Record<string, string> = {
+    utensils:
+      '<path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"></path><path d="M7 2v20"></path><path d="M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"></path>',
+    hotel:
+      '<path d="M18 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z"></path><path d="M8 6h8"></path><path d="M8 10h8"></path><path d="M8 14h8"></path><path d="M8 18h8"></path>',
+    landmark:
+      '<path d="m3 21 18-18"></path><path d="M9 15V6h6v9"></path><path d="M12 3v3"></path><path d="M3 15h18"></path><path d="M6 21v-6"></path><path d="M18 21v-6"></path>',
+    shopping:
+      '<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"></path><path d="M3 6h18"></path><path d="M16 10a4 4 0 0 1-8 0"></path>',
+    coffee:
+      '<path d="M17 8h1a4 4 0 1 1 0 8h-1"></path><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"></path><line x1="6" x2="6" y1="2" y2="4"></line><line x1="10" x2="10" y1="2" y2="4"></line><line x1="14" x2="14" y1="2" y2="4"></line>',
+  };
+
+  const path = iconPaths[iconName] || '';
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">${path}</svg>`;
+}
+
+// Definir tipos de grupos com cores e ícones Lucide
+export const markerGroups = {
+  restaurant: {
+    id: 'restaurant',
+    name: 'Restaurantes',
+    color: 'var(--destructive)', // red
+    iconColor: '#FFFFFF', // white para contraste
+    iconName: 'utensils',
+    icon: Utensils,
+  },
+  hotel: {
+    id: 'hotel',
+    name: 'Hotéis',
+    color: 'var(--info)', // blue
+    iconColor: '#FFFFFF',
+    iconName: 'hotel',
+    icon: Hotel,
+  },
+  landmark: {
+    id: 'landmark',
+    name: 'Pontos Turísticos',
+    color: 'var(--success)', // green
+    iconColor: '#FFFFFF',
+    iconName: 'landmark',
+    icon: Landmark,
+  },
+  shopping: {
+    id: 'shopping',
+    name: 'Compras',
+    color: 'var(--warning)', // orange
+    iconColor: '#FFFFFF',
+    iconName: 'shopping',
+    icon: ShoppingBag,
+  },
+  cafe: {
+    id: 'cafe',
+    name: 'Cafeterias',
+    color: 'var(--primary)', // purple
+    iconColor: '#FFFFFF',
+    iconName: 'coffee',
+    icon: Coffee,
+  },
+} as const;
+
+export type MarkerGroupId = keyof typeof markerGroups;
+
+// Dados de exemplo com diferentes grupos
+const sampleLocations = [
+  // Restaurantes
+  {
+    position: { lat: -23.5505, lng: -46.6333 },
+    title: 'Restaurante Italiano',
+    info: 'Melhor pizza da cidade',
+    group: 'restaurant' as MarkerGroupId,
+  },
+  {
+    position: { lat: -23.5485, lng: -46.635 },
+    title: 'Sushi Bar',
+    info: 'Comida japonesa autêntica',
+    group: 'restaurant' as MarkerGroupId,
+  },
+  {
+    position: { lat: -23.552, lng: -46.631 },
+    title: 'Churrascaria Premium',
+    info: 'Rodízio tradicional brasileiro',
+    group: 'restaurant' as MarkerGroupId,
+  },
+  // Hotéis
+  {
+    position: { lat: -23.5475, lng: -46.6361 },
+    title: 'Hotel Luxo',
+    info: '5 estrelas - Vista panorâmica',
+    group: 'hotel' as MarkerGroupId,
+  },
+  {
+    position: { lat: -23.553, lng: -46.634 },
+    title: 'Hotel Boutique',
+    info: 'Design moderno e aconchegante',
+    group: 'hotel' as MarkerGroupId,
+  },
+  // Pontos Turísticos
+  {
+    position: { lat: -23.5613, lng: -46.6563 },
+    title: 'Parque Ibirapuera',
+    info: 'Maior parque urbano da cidade',
+    group: 'landmark' as MarkerGroupId,
+  },
+  {
+    position: { lat: -23.5558, lng: -46.6396 },
+    title: 'MASP',
+    info: 'Museu de Arte de São Paulo',
+    group: 'landmark' as MarkerGroupId,
+  },
+  {
+    position: { lat: -23.5489, lng: -46.6388 },
+    title: 'Avenida Paulista',
+    info: 'Centro financeiro e cultural',
+    group: 'landmark' as MarkerGroupId,
+  },
+  // Shopping
+  {
+    position: { lat: -23.5465, lng: -46.64 },
+    title: 'Shopping Center',
+    info: 'Mais de 300 lojas',
+    group: 'shopping' as MarkerGroupId,
+  },
+  {
+    position: { lat: -23.554, lng: -46.638 },
+    title: 'Galeria de Arte',
+    info: 'Arte contemporânea e design',
+    group: 'shopping' as MarkerGroupId,
+  },
+  // Cafeterias
+  {
+    position: { lat: -23.5495, lng: -46.6345 },
+    title: 'Café Artesanal',
+    info: 'Café especial e brunch',
+    group: 'cafe' as MarkerGroupId,
+  },
+  {
+    position: { lat: -23.551, lng: -46.637 },
+    title: 'Coffee House',
+    info: 'Café gourmet e wi-fi',
+    group: 'cafe' as MarkerGroupId,
+  },
+  {
+    position: { lat: -23.5525, lng: -46.6355 },
+    title: 'Café Cultural',
+    info: 'Livros e café',
+    group: 'cafe' as MarkerGroupId,
+  },
+];
+
+/**
+ * Componente de Mapa com Filtro de Grupos
+ * Permite filtrar marcadores por categorias com interface integrada no mapa
+ * COMPACTO: Usa checkboxes para economia de espaço
+ */
+export interface FilterableMapExampleProps {
+  apiKey?: string;
+}
+
+export function FilterableMapExample({ apiKey }: FilterableMapExampleProps) {
+  const [activeFilters, setActiveFilters] = useState<Set<MarkerGroupId>>(
+    new Set(Object.keys(markerGroups) as MarkerGroupId[])
+  );
+  const [showFilters, setShowFilters] = useState(true);
+
+  // Filtrar locais baseado nos filtros ativos
+  const filteredLocations = useMemo(() => {
+    return sampleLocations.filter(location => activeFilters.has(location.group));
+  }, [activeFilters]);
+
+  // Toggle de filtro individual
+  const toggleFilter = (groupId: MarkerGroupId) => {
+    setActiveFilters(prev => {
+      const newFilters = new Set(prev);
+      if (newFilters.has(groupId)) {
+        newFilters.delete(groupId);
+      } else {
+        newFilters.add(groupId);
+      }
+      return newFilters;
+    });
+  };
+
+  // Selecionar/Desselecionar todos
+  const toggleAll = () => {
+    if (activeFilters.size === Object.keys(markerGroups).length) {
+      setActiveFilters(new Set());
+    } else {
+      setActiveFilters(new Set(Object.keys(markerGroups) as MarkerGroupId[]));
+    }
+  };
+
+  // Preparar marcadores com cores personalizadas e ícones
+  const markersWithCustomization = filteredLocations.map(location => ({
+    ...location,
+    customColor: markerGroups[location.group].color,
+    iconSvg: createLucideIconSvg(markerGroups[location.group].iconName),
+    iconColor: markerGroups[location.group].iconColor,
+  }));
+
+  // Contar marcadores por grupo
+  const getGroupCount = (groupId: MarkerGroupId) => {
+    return sampleLocations.filter(loc => loc.group === groupId).length;
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <MapPin className="w-5 h-5 text-primary" />
+          <h3>Filtro por Categorias</h3>
+        </div>
+        <Badge variant="secondary">
+          {filteredLocations.length} de {sampleLocations.length} locais
+        </Badge>
+      </div>
+
+      <p className="text-muted-foreground">
+        Use os filtros compactos no canto superior esquerdo do mapa para visualizar marcadores por
+        categoria
+      </p>
+
+      {/* Container do Mapa com Filtros Integrados */}
+      <div className="relative">
+        <Map
+          center={{ lat: -23.5505, lng: -46.6333 }}
+          zoom={14}
+          markers={markersWithCustomization}
+          height="500px"
+          zoomControl={true}
+          fullscreenControl={true}
+          apiKey={apiKey}
+        />
+        {/* Painel de Filtros COMPACTO Integrado no Mapa */}
+        <div
+          className={cn(
+            'absolute top-4 left-4 z-10 transition-all duration-300',
+            showFilters ? 'translate-x-0' : '-translate-x-full'
+          )}
+        >
+          <div className="p-2.5 rounded-lg shadow-[var(--shadow-elevation-sm)] bg-card border border-border max-w-[220px]">
+            <div className="flex items-center justify-between mb-2 gap-2">
+              <div className="flex items-center gap-1.5">
+                <Filter className="w-3.5 h-3.5 text-foreground" />
+                <span className="text-sm text-foreground">Filtros</span>
+              </div>
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => setShowFilters(false)}
+                className="h-5 w-5 p-0"
+              >
+                <X className="w-3 h-3" />
+              </Button>
+            </div>
+
+            <div className="space-y-1.5">
+              {/* Checkbox Todos */}
+              <div className="flex items-center space-x-2 py-0.5">
+                <Checkbox
+                  id="filter-all"
+                  checked={activeFilters.size === Object.keys(markerGroups).length}
+                  onCheckedChange={toggleAll}
+                />
+                <Label
+                  htmlFor="filter-all"
+                  className="flex items-center gap-1.5 cursor-pointer text-sm"
+                >
+                  <MapPin className="w-3.5 h-3.5" />
+                  Todos
+                  <Badge variant="secondary" className="text-xs h-4 px-1">
+                    {sampleLocations.length}
+                  </Badge>
+                </Label>
+              </div>
+
+              {/* Checkboxes de Filtro por Grupo */}
+              {Object.entries(markerGroups).map(([id, group]) => {
+                const groupId = id as MarkerGroupId;
+                const Icon = group.icon;
+                const isActive = activeFilters.has(groupId);
+                const count = getGroupCount(groupId);
+
+                return (
+                  <div key={id} className="flex items-center space-x-2 py-0.5">
+                    <Checkbox
+                      id={`filter-${id}`}
+                      checked={isActive}
+                      onCheckedChange={() => toggleFilter(groupId)}
+                    />
+                    <Label
+                      htmlFor={`filter-${id}`}
+                      className="flex items-center gap-1.5 cursor-pointer text-sm"
+                    >
+                      <Icon className="w-3.5 h-3.5" style={{ color: group.color }} />
+                      <span className={isActive ? 'text-foreground' : 'text-muted-foreground'}>
+                        {group.name}
+                      </span>
+                      <Badge variant="outline" className="text-xs h-4 px-1">
+                        {count}
+                      </Badge>
+                    </Label>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* Botão para mostrar filtros quando estão escondidos */}
+        {!showFilters && (
+          <Button
+            size="sm"
+            onClick={() => setShowFilters(true)}
+            className="absolute top-4 left-4 z-10 h-8 bg-primary text-primary-foreground"
+          >
+            <Filter className="w-3.5 h-3.5 mr-1.5" />
+            Filtros
+          </Button>
+        )}
+      </div>
+
+      {/* Legenda Horizontal */}
+      <div className="flex flex-wrap gap-3 justify-center pt-2 border-t border-border">
+        {Object.entries(markerGroups).map(([id, group]) => {
+          const Icon = group.icon;
+          const count = getGroupCount(id as MarkerGroupId);
+          return (
+            <div key={id} className="flex items-center gap-2 px-3 py-1 rounded-lg bg-muted">
+              <div className="w-3 h-3 rounded-full" style={{ backgroundColor: group.color }} />
+              <Icon className="w-4 h-4" style={{ color: group.color }} />
+              <span className="text-sm" style={{ color: 'var(--foreground)' }}>
+                {group.name}
+              </span>
+              <Badge variant="secondary" className="text-xs h-5">
+                {count}
+              </Badge>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Estatísticas */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        <div className="text-center p-3 rounded-lg bg-muted">
+          <p className="text-muted-foreground">Total de Locais</p>
+          <p className="text-2xl text-foreground">{sampleLocations.length}</p>
+        </div>
+        <div className="text-center p-3 rounded-lg bg-muted">
+          <p className="text-muted-foreground">Visíveis</p>
+          <p className="text-2xl text-primary">{filteredLocations.length}</p>
+        </div>
+        <div className="text-center p-3 rounded-lg bg-muted">
+          <p className="text-muted-foreground">Categorias</p>
+          <p className="text-2xl text-foreground">{Object.keys(markerGroups).length}</p>
+        </div>
+        <div className="text-center p-3 rounded-lg bg-muted">
+          <p className="text-muted-foreground">Filtros Ativos</p>
+          <p className="text-2xl text-chart-2">{activeFilters.size}</p>
+        </div>
+      </div>
+    </div>
+  );
+}