xertica-ui 2.2.1 → 2.4.0

package/components/examples/ApiKeyMapExample.tsx

@@ -1,71 +1,71 @@
-import React from 'react';
-import { Map } from '../ui/map';
-import { RouteMap } from '../ui/route-map';
-
-export function ApiKeyMapExample() {
-  const [key, setKey] = React.useState('');
-  const [appliedKey, setAppliedKey] = React.useState('');
-
-  const handleApply = () => {
-    if (key) setAppliedKey(key);
-  };
-
-  return (
-    <div className="space-y-8 p-6">
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Map with Explicit API Key</h2>
-        <p className="text-muted-foreground">
-          Enter a Google Maps API Key to load the maps below. This simulates a scenario where the
-          key is provided dynamically or via props, overriding/fallback for the global context.
-        </p>
-
-        <div className="flex gap-4 max-w-xl">
-          <input
-            type="text"
-            value={key}
-            onChange={e => setKey(e.target.value)}
-            placeholder="Enter Google Maps API Key"
-            aria-label="Google Maps API Key"
-            className="flex-1 px-4 py-2 border rounded-md bg-background"
-          />
-          <button
-            onClick={handleApply}
-            className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
-          >
-            Load Maps
-          </button>
-        </div>
-      </div>
-
-      {appliedKey ? (
-        <div className="grid md:grid-cols-2 gap-8">
-          <div className="space-y-4">
-            <h3 className="font-semibold">Standard Map</h3>
-            <Map
-              apiKey={appliedKey}
-              height="400px"
-              center={{ lat: -23.5505, lng: -46.6333 }}
-              zoom={12}
-              markers={[{ position: { lat: -23.5505, lng: -46.6333 }, title: 'São Paulo' }]}
-            />
-          </div>
-
-          <div className="space-y-4">
-            <h3 className="font-semibold">Route Map</h3>
-            <RouteMap
-              apiKey={appliedKey}
-              height="400px"
-              origin={{ lat: -23.5505, lng: -46.6333 }}
-              destination={{ lat: -23.6005, lng: -46.6833 }}
-              travelMode="DRIVING"
-            />
-          </div>
-        </div>
-      ) : (
-        <div className="p-12 border-2 border-dashed rounded-lg text-center text-muted-foreground">
-          Enter an API Key above to render the maps.
-        </div>
-      )}
-    </div>
-  );
-}
+import React from 'react';
+import { Map } from '../ui/map';
+import { RouteMap } from '../ui/route-map';
+
+export function ApiKeyMapExample() {
+  const [key, setKey] = React.useState('');
+  const [appliedKey, setAppliedKey] = React.useState('');
+
+  const handleApply = () => {
+    if (key) setAppliedKey(key);
+  };
+
+  return (
+    <div className="space-y-8 p-6">
+      <div className="space-y-4">
+        <h2 className="text-2xl font-bold">Map with Explicit API Key</h2>
+        <p className="text-muted-foreground">
+          Enter a Google Maps API Key to load the maps below. This simulates a scenario where the
+          key is provided dynamically or via props, overriding/fallback for the global context.
+        </p>
+
+        <div className="flex gap-4 max-w-xl">
+          <input
+            type="text"
+            value={key}
+            onChange={e => setKey(e.target.value)}
+            placeholder="Enter Google Maps API Key"
+            aria-label="Google Maps API Key"
+            className="flex-1 px-4 py-2 border rounded-md bg-background"
+          />
+          <button
+            onClick={handleApply}
+            className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+          >
+            Load Maps
+          </button>
+        </div>
+      </div>
+
+      {appliedKey ? (
+        <div className="grid md:grid-cols-2 gap-8">
+          <div className="space-y-4">
+            <h3 className="font-semibold">Standard Map</h3>
+            <Map
+              apiKey={appliedKey}
+              height="400px"
+              center={{ lat: -23.5505, lng: -46.6333 }}
+              zoom={12}
+              markers={[{ position: { lat: -23.5505, lng: -46.6333 }, title: 'São Paulo' }]}
+            />
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="font-semibold">Route Map</h3>
+            <RouteMap
+              apiKey={appliedKey}
+              height="400px"
+              origin={{ lat: -23.5505, lng: -46.6333 }}
+              destination={{ lat: -23.6005, lng: -46.6833 }}
+              travelMode="DRIVING"
+            />
+          </div>
+        </div>
+      ) : (
+        <div className="p-12 border-2 border-dashed rounded-lg text-center text-muted-foreground">
+          Enter an API Key above to render the maps.
+        </div>
+      )}
+    </div>
+  );
+}