xertica-ui 1.0.0

package/components/examples/FilterableMapExample.tsx

@@ -0,0 +1,380 @@
+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 '../ui/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.6350 },
+    title: 'Sushi Bar',
+    info: 'Comida japonesa autêntica',
+    group: 'restaurant' as MarkerGroupId,
+  },
+  {
+    position: { lat: -23.5520, lng: -46.6310 },
+    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.5530, lng: -46.6340 },
+    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.6400 },
+    title: 'Shopping Center',
+    info: 'Mais de 300 lojas',
+    group: 'shopping' as MarkerGroupId,
+  },
+  {
+    position: { lat: -23.5540, lng: -46.6380 },
+    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.5510, lng: -46.6370 },
+    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 function FilterableMapExample() {
+  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}
+        />
+        {/* 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>
+  );
+}