xertica-ui 2.1.2 → 2.1.3

package/components/examples/MapExamples.tsx

@@ -1,282 +1,282 @@
-import React 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 { MapPin, Navigation, Store, Heart } from 'lucide-react';
-
-/**
- * Exemplos práticos de uso do componente Map
- * Demonstra diferentes casos de uso do mundo real
- */
-
-// 1. Mapa de Loja com Raio de Entrega
-export function StoreDeliveryMap() {
-  const storeLocation = { lat: -23.5505, lng: -46.6333 };
-
-  return (
-    <Card>
-      <CardHeader>
-        <div className="flex items-center gap-2">
-          <Store className="w-5 h-5 text-primary" />
-          <CardTitle>Área de Entrega</CardTitle>
-        </div>
-        <CardDescription>
-          Realizamos entregas em um raio de 5km da nossa loja
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Map
-          center={storeLocation}
-          zoom={13}
-          markers={[
-            {
-              position: storeLocation,
-              title: "Nossa Loja",
-              info: "Avenida Paulista, 1000"
-            }
-          ]}
-          circle={{
-            center: storeLocation,
-            radius: 5000,
-            fillColor: "#10B981",
-            strokeColor: "#059669"
-          }}
-          height="400px"
-        />
-        <div className="mt-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <MapPin className="w-4 h-4 text-muted-foreground" />
-            <span className="text-sm text-muted-foreground">
-              Cobertura de 5km
-            </span>
-          </div>
-          <Button size="sm">
-            <Navigation className="w-4 h-4 mr-2" />
-            Como Chegar
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-// 2. Mapa de Locais Favoritos
-export function FavoritePlacesMap() {
-  const favorites = [
-    {
-      position: { lat: -23.5505, lng: -46.6333 },
-      label: "⭐",
-      title: "Restaurante Favorito",
-      info: "Melhor pizza da cidade!"
-    },
-    {
-      position: { lat: -23.5475, lng: -46.6361 },
-      label: "☕",
-      title: "Cafeteria",
-      info: "Café artesanal"
-    },
-    {
-      position: { lat: -23.5613, lng: -46.6563 },
-      label: "🏃",
-      title: "Parque",
-      info: "Local de corrida matinal"
-    },
-    {
-      position: { lat: -23.5558, lng: -46.6396 },
-      label: "🎬",
-      title: "Cinema",
-      info: "Cinema independente"
-    }
-  ];
-
-  return (
-    <Card>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Heart className="w-5 h-5 text-destructive" />
-            <CardTitle>Meus Lugares Favoritos</CardTitle>
-          </div>
-          <Badge variant="secondary">{favorites.length} locais</Badge>
-        </div>
-        <CardDescription>
-          Lugares que você marcou como favoritos
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Map
-          center={{ lat: -23.5505, lng: -46.6333 }}
-          zoom={13}
-          markers={favorites}
-          height="450px"
-        />
-      </CardContent>
-    </Card>
-  );
-}
-
-// 3. Mapa de Escritórios da Empresa
-export function CompanyOfficesMap() {
-  const offices = [
-    {
-      position: { lat: -23.5505, lng: -46.6333 },
-      label: "HQ",
-      title: "Sede - São Paulo",
-      info: "Matriz da empresa - 200 funcionários"
-    },
-    {
-      position: { lat: -22.9068, lng: -43.1729 },
-      label: "RJ",
-      title: "Filial - Rio de Janeiro",
-      info: "Escritório regional - 80 funcionários"
-    },
-    {
-      position: { lat: -19.9167, lng: -43.9345 },
-      label: "BH",
-      title: "Filial - Belo Horizonte",
-      info: "Centro de distribuição - 50 funcionários"
-    },
-    {
-      position: { lat: -25.4284, lng: -49.2733 },
-      label: "CWB",
-      title: "Filial - Curitiba",
-      info: "Centro de tecnologia - 120 funcionários"
-    }
-  ];
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Nossos Escritórios</CardTitle>
-        <CardDescription>
-          Presença em 4 estados brasileiros
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Map
-          center={{ lat: -22.5, lng: -45.0 }}
-          zoom={6}
-          markers={offices}
-          height="500px"
-          zoomControl={true}
-          fullscreenControl={true}
-        />
-        <div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-2">
-          {offices.map((office, index) => (
-            <div key={index} className="text-center p-3 bg-muted rounded-lg">
-              <div className="text-2xl mb-1">{office.label}</div>
-              <p className="text-xs text-muted-foreground line-clamp-1">
-                {office.title}
-              </p>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-// 4. Mapa de Zona de Serviço com Polígono
-export function ServiceZoneMap() {
-  const serviceZone = {
-    paths: [
-      [
-        { lat: -23.540, lng: -46.620 },
-        { lat: -23.540, lng: -46.660 },
-        { lat: -23.565, lng: -46.660 },
-        { lat: -23.565, lng: -46.620 }
-      ]
-    ],
-    fillColor: "#3B82F6",
-    strokeColor: "#2563EB"
-  };
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Área de Atendimento</CardTitle>
-        <CardDescription>
-          Zona azul indica nossa área de serviço prioritária
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Map
-          center={{ lat: -23.5525, lng: -46.640 }}
-          zoom={13}
-          polygon={serviceZone}
-          markers={[
-            {
-              position: { lat: -23.5525, lng: -46.640 },
-              title: "Central de Operações",
-              info: "Base de atendimento"
-            }
-          ]}
-          height="450px"
-        />
-        <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
-          <p className="text-sm text-blue-900 dark:text-blue-100">
-            <strong>Atendimento prioritário:</strong> Clientes dentro da zona azul
-            recebem atendimento em até 2 horas.
-          </p>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-// 5. Grid de Mapas Compactos (Comparação)
-export function CompactMapsGrid() {
-  const cities = [
-    {
-      name: "São Paulo",
-      center: { lat: -23.5505, lng: -46.6333 },
-      description: "Maior cidade do Brasil"
-    },
-    {
-      name: "Rio de Janeiro",
-      center: { lat: -22.9068, lng: -43.1729 },
-      description: "Cidade maravilhosa"
-    },
-    {
-      name: "Brasília",
-      center: { lat: -15.7942, lng: -47.8822 },
-      description: "Capital federal"
-    },
-    {
-      name: "Salvador",
-      center: { lat: -12.9714, lng: -38.5014 },
-      description: "Primeira capital"
-    }
-  ];
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Principais Cidades</CardTitle>
-        <CardDescription>
-          Visão rápida das principais metrópoles brasileiras
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {cities.map((city, index) => (
-            <div key={index} className="space-y-2">
-              <div className="flex items-center justify-between">
-                <h4 className="font-medium">{city.name}</h4>
-                <Badge variant="outline">{city.description}</Badge>
-              </div>
-              <Map
-                center={city.center}
-                zoom={11}
-                height="200px"
-                disableDefaultUI={true}
-                gestureHandling="none"
-              />
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
+import React 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 { MapPin, Navigation, Store, Heart } from 'lucide-react';
+
+/**
+ * Exemplos práticos de uso do componente Map
+ * Demonstra diferentes casos de uso do mundo real
+ */
+
+// 1. Mapa de Loja com Raio de Entrega
+export function StoreDeliveryMap() {
+  const storeLocation = { lat: -23.5505, lng: -46.6333 };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <Store className="w-5 h-5 text-primary" />
+          <CardTitle>Área de Entrega</CardTitle>
+        </div>
+        <CardDescription>
+          Realizamos entregas em um raio de 5km da nossa loja
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Map
+          center={storeLocation}
+          zoom={13}
+          markers={[
+            {
+              position: storeLocation,
+              title: "Nossa Loja",
+              info: "Avenida Paulista, 1000"
+            }
+          ]}
+          circle={{
+            center: storeLocation,
+            radius: 5000,
+            fillColor: "#10B981",
+            strokeColor: "#059669"
+          }}
+          height="400px"
+        />
+        <div className="mt-4 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <MapPin className="w-4 h-4 text-muted-foreground" />
+            <span className="text-sm text-muted-foreground">
+              Cobertura de 5km
+            </span>
+          </div>
+          <Button size="sm">
+            <Navigation className="w-4 h-4 mr-2" />
+            Como Chegar
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// 2. Mapa de Locais Favoritos
+export function FavoritePlacesMap() {
+  const favorites = [
+    {
+      position: { lat: -23.5505, lng: -46.6333 },
+      label: "⭐",
+      title: "Restaurante Favorito",
+      info: "Melhor pizza da cidade!"
+    },
+    {
+      position: { lat: -23.5475, lng: -46.6361 },
+      label: "☕",
+      title: "Cafeteria",
+      info: "Café artesanal"
+    },
+    {
+      position: { lat: -23.5613, lng: -46.6563 },
+      label: "🏃",
+      title: "Parque",
+      info: "Local de corrida matinal"
+    },
+    {
+      position: { lat: -23.5558, lng: -46.6396 },
+      label: "🎬",
+      title: "Cinema",
+      info: "Cinema independente"
+    }
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Heart className="w-5 h-5 text-destructive" />
+            <CardTitle>Meus Lugares Favoritos</CardTitle>
+          </div>
+          <Badge variant="secondary">{favorites.length} locais</Badge>
+        </div>
+        <CardDescription>
+          Lugares que você marcou como favoritos
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Map
+          center={{ lat: -23.5505, lng: -46.6333 }}
+          zoom={13}
+          markers={favorites}
+          height="450px"
+        />
+      </CardContent>
+    </Card>
+  );
+}
+
+// 3. Mapa de Escritórios da Empresa
+export function CompanyOfficesMap() {
+  const offices = [
+    {
+      position: { lat: -23.5505, lng: -46.6333 },
+      label: "HQ",
+      title: "Sede - São Paulo",
+      info: "Matriz da empresa - 200 funcionários"
+    },
+    {
+      position: { lat: -22.9068, lng: -43.1729 },
+      label: "RJ",
+      title: "Filial - Rio de Janeiro",
+      info: "Escritório regional - 80 funcionários"
+    },
+    {
+      position: { lat: -19.9167, lng: -43.9345 },
+      label: "BH",
+      title: "Filial - Belo Horizonte",
+      info: "Centro de distribuição - 50 funcionários"
+    },
+    {
+      position: { lat: -25.4284, lng: -49.2733 },
+      label: "CWB",
+      title: "Filial - Curitiba",
+      info: "Centro de tecnologia - 120 funcionários"
+    }
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Nossos Escritórios</CardTitle>
+        <CardDescription>
+          Presença em 4 estados brasileiros
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Map
+          center={{ lat: -22.5, lng: -45.0 }}
+          zoom={6}
+          markers={offices}
+          height="500px"
+          zoomControl={true}
+          fullscreenControl={true}
+        />
+        <div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-2">
+          {offices.map((office, index) => (
+            <div key={index} className="text-center p-3 bg-muted rounded-lg">
+              <div className="text-2xl mb-1">{office.label}</div>
+              <p className="text-xs text-muted-foreground line-clamp-1">
+                {office.title}
+              </p>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// 4. Mapa de Zona de Serviço com Polígono
+export function ServiceZoneMap() {
+  const serviceZone = {
+    paths: [
+      [
+        { lat: -23.540, lng: -46.620 },
+        { lat: -23.540, lng: -46.660 },
+        { lat: -23.565, lng: -46.660 },
+        { lat: -23.565, lng: -46.620 }
+      ]
+    ],
+    fillColor: "#3B82F6",
+    strokeColor: "#2563EB"
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Área de Atendimento</CardTitle>
+        <CardDescription>
+          Zona azul indica nossa área de serviço prioritária
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Map
+          center={{ lat: -23.5525, lng: -46.640 }}
+          zoom={13}
+          polygon={serviceZone}
+          markers={[
+            {
+              position: { lat: -23.5525, lng: -46.640 },
+              title: "Central de Operações",
+              info: "Base de atendimento"
+            }
+          ]}
+          height="450px"
+        />
+        <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
+          <p className="text-sm text-blue-900 dark:text-blue-100">
+            <strong>Atendimento prioritário:</strong> Clientes dentro da zona azul
+            recebem atendimento em até 2 horas.
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// 5. Grid de Mapas Compactos (Comparação)
+export function CompactMapsGrid() {
+  const cities = [
+    {
+      name: "São Paulo",
+      center: { lat: -23.5505, lng: -46.6333 },
+      description: "Maior cidade do Brasil"
+    },
+    {
+      name: "Rio de Janeiro",
+      center: { lat: -22.9068, lng: -43.1729 },
+      description: "Cidade maravilhosa"
+    },
+    {
+      name: "Brasília",
+      center: { lat: -15.7942, lng: -47.8822 },
+      description: "Capital federal"
+    },
+    {
+      name: "Salvador",
+      center: { lat: -12.9714, lng: -38.5014 },
+      description: "Primeira capital"
+    }
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Principais Cidades</CardTitle>
+        <CardDescription>
+          Visão rápida das principais metrópoles brasileiras
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {cities.map((city, index) => (
+            <div key={index} className="space-y-2">
+              <div className="flex items-center justify-between">
+                <h4 className="font-medium">{city.name}</h4>
+                <Badge variant="outline">{city.description}</Badge>
+              </div>
+              <Map
+                center={city.center}
+                zoom={11}
+                height="200px"
+                disableDefaultUI={true}
+                gestureHandling="none"
+              />
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}