xertica-ui 2.2.1 → 2.4.0

package/components/examples/MapGmpExample.tsx

@@ -1,169 +1,169 @@
-import React, { useState } from 'react';
-import { Map, MapProps } from '../ui/map';
-import { RouteMap } from '../ui/route-map';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
-
-export function MapGmpExample() {
-  const [apiKey, setApiKey] = useState('');
-
-  // Example markers
-  const markers = [
-    {
-      position: { lat: -23.5505, lng: -46.6333 },
-      title: 'São Paulo',
-      info: 'Capital financeira',
-      customColor: '#EF4444',
-      icon: 'SP',
-    },
-    {
-      position: { lat: -23.58, lng: -46.65 },
-      title: 'Ibirapuera',
-      info: 'Parque do Ibirapuera',
-      customColor: '#10B981',
-      icon: 'IB',
-    },
-  ];
-
-  return (
-    <div className="container mx-auto py-8 space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-3xl font-bold">Google Maps Platform - Web Components</h1>
-        <p className="text-muted-foreground">
-          This example uses custom elements <code>&lt;gmp-map&gt;</code> and{' '}
-          <code>&lt;gmp-advanced-marker&gt;</code> for better performance and modern integration.
-        </p>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>API Key Configuration</CardTitle>
-            <CardDescription>
-              Enter your API Key to load the maps. It will be stored in the session context.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="flex gap-4">
-              <Input
-                type="password"
-                placeholder="Paste your Google Maps API Key here"
-                aria-label="Google Maps API Key"
-                value={apiKey}
-                onChange={e => setApiKey(e.target.value)}
-                className="h-10"
-              />
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      <Tabs defaultValue="standard">
-        <TabsList className="mb-4">
-          <TabsTrigger value="standard">Standard Map</TabsTrigger>
-          <TabsTrigger value="satellite">Satellite</TabsTrigger>
-          <TabsTrigger value="dark">Dark / NY</TabsTrigger>
-          <TabsTrigger value="route">Route Map</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="standard" className="space-y-4">
-          <Card>
-            <CardHeader>
-              <CardTitle>Standard Map (&lt;gmp-map&gt;)</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Map
-                apiKey={apiKey}
-                height="500px"
-                zoom={12}
-                center={{ lat: -23.56, lng: -46.64 }}
-                markers={markers}
-                circle={{
-                  center: { lat: -23.5505, lng: -46.6333 },
-                  radius: 1000,
-                  fillColor: '#EF4444',
-                }}
-              />
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="route" className="space-y-4">
-          <Card>
-            <CardHeader>
-              <CardTitle>Route Map (Hybrid)</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <RouteMap
-                apiKey={apiKey}
-                height="500px"
-                origin={{ lat: -23.5505, lng: -46.6333 }}
-                destination={{ lat: -23.58, lng: -46.65 }}
-                travelMode="DRIVING"
-                onRouteCalculated={(distance, duration) =>
-                  console.log(`Route: ${distance}, ${duration}`)
-                }
-              />
-            </CardContent>
-          </Card>
-        </TabsContent>
-        <TabsContent value="satellite" className="space-y-4">
-          <Card>
-            <CardHeader>
-              <CardTitle>Satellite View</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Map
-                apiKey={apiKey}
-                height="500px"
-                zoom={16}
-                center={{ lat: -23.5505, lng: -46.6333 }}
-                mapTypeId="satellite"
-                markers={[
-                  {
-                    position: { lat: -23.5505, lng: -46.6333 },
-                    title: 'Detailed View',
-                    customColor: '#ffffff',
-                    iconColor: '#000000',
-                    icon: '👁️',
-                  },
-                ]}
-              />
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="dark" className="space-y-4">
-          <Card>
-            <CardHeader>
-              <CardTitle>Dark Mode (Styled)</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Map
-                apiKey={apiKey}
-                height="500px"
-                zoom={12}
-                center={{ lat: 40.7128, lng: -74.006 }}
-                mapId="4504f8b37365c3d0" // Example Dark Map ID (won't work without config, falling back to standard if invalid)
-                // Alternatively use styles prop if we supported legacy styles, but GMP recommends MapID.
-                // For now, let's just show a different location and markers to varify reusability
-                markers={[
-                  {
-                    position: { lat: 40.7128, lng: -74.006 },
-                    title: 'New York',
-                    customColor: '#3b82f6',
-                  },
-                  {
-                    position: { lat: 40.758, lng: -73.9855 },
-                    title: 'Times Square',
-                    customColor: '#8b5cf6',
-                  },
-                ]}
-              />
-            </CardContent>
-          </Card>
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}
+import React, { useState } from 'react';
+import { Map, MapProps } from '../ui/map';
+import { RouteMap } from '../ui/route-map';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
+
+export function MapGmpExample() {
+  const [apiKey, setApiKey] = useState('');
+
+  // Example markers
+  const markers = [
+    {
+      position: { lat: -23.5505, lng: -46.6333 },
+      title: 'São Paulo',
+      info: 'Capital financeira',
+      customColor: '#EF4444',
+      icon: 'SP',
+    },
+    {
+      position: { lat: -23.58, lng: -46.65 },
+      title: 'Ibirapuera',
+      info: 'Parque do Ibirapuera',
+      customColor: '#10B981',
+      icon: 'IB',
+    },
+  ];
+
+  return (
+    <div className="container mx-auto py-8 space-y-8">
+      <div className="space-y-4">
+        <h1 className="text-3xl font-bold">Google Maps Platform - Web Components</h1>
+        <p className="text-muted-foreground">
+          This example uses custom elements <code>&lt;gmp-map&gt;</code> and{' '}
+          <code>&lt;gmp-advanced-marker&gt;</code> for better performance and modern integration.
+        </p>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>API Key Configuration</CardTitle>
+            <CardDescription>
+              Enter your API Key to load the maps. It will be stored in the session context.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex gap-4">
+              <Input
+                type="password"
+                placeholder="Paste your Google Maps API Key here"
+                aria-label="Google Maps API Key"
+                value={apiKey}
+                onChange={e => setApiKey(e.target.value)}
+                className="h-10"
+              />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="standard">
+        <TabsList className="mb-4">
+          <TabsTrigger value="standard">Standard Map</TabsTrigger>
+          <TabsTrigger value="satellite">Satellite</TabsTrigger>
+          <TabsTrigger value="dark">Dark / NY</TabsTrigger>
+          <TabsTrigger value="route">Route Map</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="standard" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Standard Map (&lt;gmp-map&gt;)</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Map
+                apiKey={apiKey}
+                height="500px"
+                zoom={12}
+                center={{ lat: -23.56, lng: -46.64 }}
+                markers={markers}
+                circle={{
+                  center: { lat: -23.5505, lng: -46.6333 },
+                  radius: 1000,
+                  fillColor: '#EF4444',
+                }}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="route" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Route Map (Hybrid)</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <RouteMap
+                apiKey={apiKey}
+                height="500px"
+                origin={{ lat: -23.5505, lng: -46.6333 }}
+                destination={{ lat: -23.58, lng: -46.65 }}
+                travelMode="DRIVING"
+                onRouteCalculated={(distance, duration) =>
+                  console.log(`Route: ${distance}, ${duration}`)
+                }
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="satellite" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Satellite View</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Map
+                apiKey={apiKey}
+                height="500px"
+                zoom={16}
+                center={{ lat: -23.5505, lng: -46.6333 }}
+                mapTypeId="satellite"
+                markers={[
+                  {
+                    position: { lat: -23.5505, lng: -46.6333 },
+                    title: 'Detailed View',
+                    customColor: '#ffffff',
+                    iconColor: '#000000',
+                    icon: '👁️',
+                  },
+                ]}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="dark" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Dark Mode (Styled)</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Map
+                apiKey={apiKey}
+                height="500px"
+                zoom={12}
+                center={{ lat: 40.7128, lng: -74.006 }}
+                mapId="4504f8b37365c3d0" // Example Dark Map ID (won't work without config, falling back to standard if invalid)
+                // Alternatively use styles prop if we supported legacy styles, but GMP recommends MapID.
+                // For now, let's just show a different location and markers to varify reusability
+                markers={[
+                  {
+                    position: { lat: 40.7128, lng: -74.006 },
+                    title: 'New York',
+                    customColor: '#3b82f6',
+                  },
+                  {
+                    position: { lat: 40.758, lng: -73.9855 },
+                    title: 'Times Square',
+                    customColor: '#8b5cf6',
+                  },
+                ]}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}