@next-degree/pickle-shared-js 0.4.31 → 0.5.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/app/layout.css +12 -0
- package/dist/app/layout.css.map +1 -1
- package/dist/app/page.cjs +99 -9
- package/dist/app/page.cjs.map +1 -1
- package/dist/app/page.js +98 -8
- package/dist/app/page.js.map +1 -1
- package/dist/components/demos/MapComponentDemo.cjs +129 -0
- package/dist/components/demos/MapComponentDemo.cjs.map +1 -0
- package/dist/components/demos/MapComponentDemo.d.cts +5 -0
- package/dist/components/demos/MapComponentDemo.d.ts +5 -0
- package/dist/components/demos/MapComponentDemo.js +107 -0
- package/dist/components/demos/MapComponentDemo.js.map +1 -0
- package/dist/components/demos/PlacesQueryInputDemo.cjs.map +1 -1
- package/dist/components/demos/PlacesQueryInputDemo.js.map +1 -1
- package/dist/components/demos/index.cjs +97 -7
- package/dist/components/demos/index.cjs.map +1 -1
- package/dist/components/demos/index.js +96 -6
- package/dist/components/demos/index.js.map +1 -1
- package/dist/components/primitives/command.d.cts +1 -1
- package/dist/components/primitives/command.d.ts +1 -1
- package/dist/components/ui/MapComponent.cjs +54 -0
- package/dist/components/ui/MapComponent.cjs.map +1 -0
- package/dist/components/ui/MapComponent.d.cts +15 -0
- package/dist/components/ui/MapComponent.d.ts +15 -0
- package/dist/components/ui/MapComponent.js +34 -0
- package/dist/components/ui/MapComponent.js.map +1 -0
- package/dist/components/ui/PlacesQueryInput.cjs.map +1 -1
- package/dist/components/ui/PlacesQueryInput.js.map +1 -1
- package/dist/index.cjs +132 -72
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +115 -57
- package/dist/index.js.map +1 -1
- package/dist/lib/google.cjs +44 -2
- package/dist/lib/google.cjs.map +1 -1
- package/dist/lib/google.d.cts +22 -1
- package/dist/lib/google.d.ts +22 -1
- package/dist/lib/google.js +40 -1
- package/dist/lib/google.js.map +1 -1
- package/dist/styles/globals.css +12 -0
- package/dist/styles/globals.css.map +1 -1
- package/package.json +2 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/demos/MapComponentDemo.tsx","../../../src/components/ui/MapComponent.tsx","../../../src/lib/utils.ts","../../../src/lib/google.ts"],"sourcesContent":["'use client'\n\nimport MapComponent from '@/components/ui/MapComponent'\nimport { fetchLocation } from '@/lib/google'\nimport { useEffect, useState } from 'react'\n\nconst API_KEY = process.env.NEXT_PUBLIC_GOOGLE_API_KEY ?? ''\nconst MAP_ID = process.env.NEXT_PUBLIC_GOOGLE_MAP_ID ?? ''\n\nfunction MapComponentDemo() {\n const [position, setPosition] = useState<{ lat: number; lng: number } | undefined>()\n\n const place = {\n place_id: 'ChIJaXQRs6lZwokRY6EFpJnhNNE', // Empire State Building Place ID\n address: 'Empire State Building, New York, NY, USA',\n }\n\n useEffect(() => {\n fetchLocation(place, API_KEY).then((location) => {\n if (location) {\n const { lat, lng } = location.geometry?.location ?? {}\n if (!lat || !lng) return\n\n setPosition({ lat, lng })\n }\n })\n }, [])\n\n return (\n <MapComponent\n apiKey={API_KEY}\n mapId={MAP_ID}\n className=\"h-[36rem] w-[36rem] p-4\"\n position={position}\n />\n )\n}\n\nexport default MapComponentDemo\n","'use client'\n\nimport { APIProvider, Map, AdvancedMarker, Pin } from '@vis.gl/react-google-maps'\nimport { cn } from '@/lib/utils'\n\ninterface MapComponentProps {\n apiKey: string\n mapId: string // Check your map ID at https://console.cloud.google.com/google/maps-apis/studio/maps\n position?: { lat: number; lng: number }\n className?: string\n zoom?: number\n}\n\nfunction MapComponent({ apiKey, mapId, position, className, zoom = 15 }: Readonly<MapComponentProps>) {\n const defaultPosition = { lat: 40.715021, lng: -74.004590 }\n const defaultZoom = 11\n\n return (\n <APIProvider apiKey={apiKey}>\n <div className={cn('h-screen max-w-full', className)}>\n <Map\n zoom={position ? zoom : defaultZoom}\n center={position || defaultPosition}\n mapId={mapId}\n keyboardShortcuts={false}\n disableDefaultUI\n >\n {position && (\n <AdvancedMarker position={position}>\n <Pin background=\"#0B5441\" borderColor=\"#EBFDF1\" glyphColor=\"#D4F500\" />\n </AdvancedMarker>\n )}\n </Map>\n </div>\n </APIProvider>\n )\n}\n\nexport default MapComponent\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","'use server'\n\nimport { Client, PlaceAutocompleteType, PlaceData } from '@googlemaps/google-maps-services-js'\n\nconst client = new Client()\n\nexport const autocomplete = async (input: string, key: string) => {\n try {\n const response = await client.placeAutocomplete({\n params: { input, key, types: PlaceAutocompleteType.address },\n })\n\n return response.data.predictions\n } catch (error) {\n console.error(error)\n }\n}\n\ntype Place = {\n place_id?: string\n address?: string\n}\n/**\n * This is the exported function that calls the Google api to fetch the location based on the place_id or address.\n */\nexport const fetchLocation = async (\n place: Place,\n key: string\n): Promise<Partial<PlaceData> | undefined> => {\n try {\n if (place.place_id) {\n const placeDetails = await getPlaceDetails(place.place_id, key)\n if (placeDetails) return placeDetails\n }\n if (place.address) {\n const result = await geocode(place.address, key)\n const firstAddress = result?.[0]\n return firstAddress\n }\n\n return undefined\n } catch (error) {\n console.error('Error fetching location:', error)\n }\n}\n\n/**\n * If you have a place ID, you can use the placeDetails method to get more information about a place.\n * The advantage over an address is that there will be no ambiguity about the location.\n * @param place_id\n * @param key\n * @returns\n */\nexport const getPlaceDetails = async (place_id: string, key: string) => {\n try {\n const response = await client.placeDetails({\n params: { place_id, key },\n })\n\n return response.data.result\n } catch (error) {\n console.error(error)\n }\n}\n\n/**\n * The geocode method is used to convert an address into actual location(s) with lat/long.\n */\nexport const geocode = async (address: string, key: string) => {\n try {\n const response = await client.geocode({\n params: { address, key },\n })\n\n return response.data.results\n } catch (error) {\n console.error(error)\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,+BAAsD;;;ACFtD,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADwBc;AAhBd,SAAS,aAAa,EAAE,QAAQ,OAAO,UAAU,WAAW,OAAO,GAAG,GAAgC;AACpG,QAAM,kBAAkB,EAAE,KAAK,WAAW,KAAK,UAAW;AAC1D,QAAM,cAAc;AAEpB,SACE,4CAAC,wCAAY,QACX,sDAAC,SAAI,WAAW,GAAG,uBAAuB,SAAS,GACjD;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,WAAW,OAAO;AAAA,MACxB,QAAQ,YAAY;AAAA,MACpB;AAAA,MACA,mBAAmB;AAAA,MACnB,kBAAgB;AAAA,MAEf,sBACC,4CAAC,2CAAe,UACd,sDAAC,gCAAI,YAAW,WAAU,aAAY,WAAU,YAAW,WAAU,GACvE;AAAA;AAAA,EAEJ,GACF,GACF;AAEJ;AAEA,IAAO,uBAAQ;;;AEpCf,qCAAyD;AAEzD,IAAM,SAAS,IAAI,sCAAO;AAqBnB,IAAM,gBAAgB,OAC3B,OACA,QAC4C;AAC5C,MAAI;AACF,QAAI,MAAM,UAAU;AAClB,YAAM,eAAe,MAAM,gBAAgB,MAAM,UAAU,GAAG;AAC9D,UAAI,aAAc,QAAO;AAAA,IAC3B;AACA,QAAI,MAAM,SAAS;AACjB,YAAM,SAAS,MAAM,QAAQ,MAAM,SAAS,GAAG;AAC/C,YAAM,eAAe,SAAS,CAAC;AAC/B,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,SAAS,OAAO;AACd,YAAQ,MAAM,4BAA4B,KAAK;AAAA,EACjD;AACF;AASO,IAAM,kBAAkB,OAAO,UAAkB,QAAgB;AACtE,MAAI;AACF,UAAM,WAAW,MAAM,OAAO,aAAa;AAAA,MACzC,QAAQ,EAAE,UAAU,IAAI;AAAA,IAC1B,CAAC;AAED,WAAO,SAAS,KAAK;AAAA,EACvB,SAAS,OAAO;AACd,YAAQ,MAAM,KAAK;AAAA,EACrB;AACF;AAKO,IAAM,UAAU,OAAO,SAAiB,QAAgB;AAC7D,MAAI;AACF,UAAM,WAAW,MAAM,OAAO,QAAQ;AAAA,MACpC,QAAQ,EAAE,SAAS,IAAI;AAAA,IACzB,CAAC;AAED,WAAO,SAAS,KAAK;AAAA,EACvB,SAAS,OAAO;AACd,YAAQ,MAAM,KAAK;AAAA,EACrB;AACF;;;AH1EA,mBAAoC;AAyBhC,IAAAA,sBAAA;AAvBJ,IAAM,UAAU,QAAQ,IAAI,8BAA8B;AAC1D,IAAM,SAAS,QAAQ,IAAI,6BAA6B;AAExD,SAAS,mBAAmB;AAC1B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAmD;AAEnF,QAAM,QAAQ;AAAA,IACZ,UAAU;AAAA;AAAA,IACV,SAAS;AAAA,EACX;AAEA,8BAAU,MAAM;AACd,kBAAc,OAAO,OAAO,EAAE,KAAK,CAAC,aAAa;AAC/C,UAAI,UAAU;AACZ,cAAM,EAAE,KAAK,IAAI,IAAI,SAAS,UAAU,YAAY,CAAC;AACrD,YAAI,CAAC,OAAO,CAAC,IAAK;AAElB,oBAAY,EAAE,KAAK,IAAI,CAAC;AAAA,MAC1B;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAU;AAAA,MACV;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,2BAAQ;","names":["import_jsx_runtime"]}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/components/ui/MapComponent.tsx
|
|
4
|
+
import { APIProvider, Map, AdvancedMarker, Pin } from "@vis.gl/react-google-maps";
|
|
5
|
+
|
|
6
|
+
// src/lib/utils.ts
|
|
7
|
+
import { clsx } from "clsx";
|
|
8
|
+
import { twMerge } from "tailwind-merge";
|
|
9
|
+
function cn(...inputs) {
|
|
10
|
+
return twMerge(clsx(inputs));
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// src/components/ui/MapComponent.tsx
|
|
14
|
+
import { jsx } from "react/jsx-runtime";
|
|
15
|
+
function MapComponent({ apiKey, mapId, position, className, zoom = 15 }) {
|
|
16
|
+
const defaultPosition = { lat: 40.715021, lng: -74.00459 };
|
|
17
|
+
const defaultZoom = 11;
|
|
18
|
+
return /* @__PURE__ */ jsx(APIProvider, { apiKey, children: /* @__PURE__ */ jsx("div", { className: cn("h-screen max-w-full", className), children: /* @__PURE__ */ jsx(
|
|
19
|
+
Map,
|
|
20
|
+
{
|
|
21
|
+
zoom: position ? zoom : defaultZoom,
|
|
22
|
+
center: position || defaultPosition,
|
|
23
|
+
mapId,
|
|
24
|
+
keyboardShortcuts: false,
|
|
25
|
+
disableDefaultUI: true,
|
|
26
|
+
children: position && /* @__PURE__ */ jsx(AdvancedMarker, { position, children: /* @__PURE__ */ jsx(Pin, { background: "#0B5441", borderColor: "#EBFDF1", glyphColor: "#D4F500" }) })
|
|
27
|
+
}
|
|
28
|
+
) }) });
|
|
29
|
+
}
|
|
30
|
+
var MapComponent_default = MapComponent;
|
|
31
|
+
|
|
32
|
+
// src/lib/google.ts
|
|
33
|
+
import { Client, PlaceAutocompleteType } from "@googlemaps/google-maps-services-js";
|
|
34
|
+
var client = new Client();
|
|
35
|
+
var fetchLocation = async (place, key) => {
|
|
36
|
+
try {
|
|
37
|
+
if (place.place_id) {
|
|
38
|
+
const placeDetails = await getPlaceDetails(place.place_id, key);
|
|
39
|
+
if (placeDetails) return placeDetails;
|
|
40
|
+
}
|
|
41
|
+
if (place.address) {
|
|
42
|
+
const result = await geocode(place.address, key);
|
|
43
|
+
const firstAddress = result?.[0];
|
|
44
|
+
return firstAddress;
|
|
45
|
+
}
|
|
46
|
+
return void 0;
|
|
47
|
+
} catch (error) {
|
|
48
|
+
console.error("Error fetching location:", error);
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
var getPlaceDetails = async (place_id, key) => {
|
|
52
|
+
try {
|
|
53
|
+
const response = await client.placeDetails({
|
|
54
|
+
params: { place_id, key }
|
|
55
|
+
});
|
|
56
|
+
return response.data.result;
|
|
57
|
+
} catch (error) {
|
|
58
|
+
console.error(error);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
var geocode = async (address, key) => {
|
|
62
|
+
try {
|
|
63
|
+
const response = await client.geocode({
|
|
64
|
+
params: { address, key }
|
|
65
|
+
});
|
|
66
|
+
return response.data.results;
|
|
67
|
+
} catch (error) {
|
|
68
|
+
console.error(error);
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
// src/components/demos/MapComponentDemo.tsx
|
|
73
|
+
import { useEffect, useState } from "react";
|
|
74
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
75
|
+
var API_KEY = process.env.NEXT_PUBLIC_GOOGLE_API_KEY ?? "";
|
|
76
|
+
var MAP_ID = process.env.NEXT_PUBLIC_GOOGLE_MAP_ID ?? "";
|
|
77
|
+
function MapComponentDemo() {
|
|
78
|
+
const [position, setPosition] = useState();
|
|
79
|
+
const place = {
|
|
80
|
+
place_id: "ChIJaXQRs6lZwokRY6EFpJnhNNE",
|
|
81
|
+
// Empire State Building Place ID
|
|
82
|
+
address: "Empire State Building, New York, NY, USA"
|
|
83
|
+
};
|
|
84
|
+
useEffect(() => {
|
|
85
|
+
fetchLocation(place, API_KEY).then((location) => {
|
|
86
|
+
if (location) {
|
|
87
|
+
const { lat, lng } = location.geometry?.location ?? {};
|
|
88
|
+
if (!lat || !lng) return;
|
|
89
|
+
setPosition({ lat, lng });
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
}, []);
|
|
93
|
+
return /* @__PURE__ */ jsx2(
|
|
94
|
+
MapComponent_default,
|
|
95
|
+
{
|
|
96
|
+
apiKey: API_KEY,
|
|
97
|
+
mapId: MAP_ID,
|
|
98
|
+
className: "h-[36rem] w-[36rem] p-4",
|
|
99
|
+
position
|
|
100
|
+
}
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
var MapComponentDemo_default = MapComponentDemo;
|
|
104
|
+
export {
|
|
105
|
+
MapComponentDemo_default as default
|
|
106
|
+
};
|
|
107
|
+
//# sourceMappingURL=MapComponentDemo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/MapComponent.tsx","../../../src/lib/utils.ts","../../../src/lib/google.ts","../../../src/components/demos/MapComponentDemo.tsx"],"sourcesContent":["'use client'\n\nimport { APIProvider, Map, AdvancedMarker, Pin } from '@vis.gl/react-google-maps'\nimport { cn } from '@/lib/utils'\n\ninterface MapComponentProps {\n apiKey: string\n mapId: string // Check your map ID at https://console.cloud.google.com/google/maps-apis/studio/maps\n position?: { lat: number; lng: number }\n className?: string\n zoom?: number\n}\n\nfunction MapComponent({ apiKey, mapId, position, className, zoom = 15 }: Readonly<MapComponentProps>) {\n const defaultPosition = { lat: 40.715021, lng: -74.004590 }\n const defaultZoom = 11\n\n return (\n <APIProvider apiKey={apiKey}>\n <div className={cn('h-screen max-w-full', className)}>\n <Map\n zoom={position ? zoom : defaultZoom}\n center={position || defaultPosition}\n mapId={mapId}\n keyboardShortcuts={false}\n disableDefaultUI\n >\n {position && (\n <AdvancedMarker position={position}>\n <Pin background=\"#0B5441\" borderColor=\"#EBFDF1\" glyphColor=\"#D4F500\" />\n </AdvancedMarker>\n )}\n </Map>\n </div>\n </APIProvider>\n )\n}\n\nexport default MapComponent\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","'use server'\n\nimport { Client, PlaceAutocompleteType, PlaceData } from '@googlemaps/google-maps-services-js'\n\nconst client = new Client()\n\nexport const autocomplete = async (input: string, key: string) => {\n try {\n const response = await client.placeAutocomplete({\n params: { input, key, types: PlaceAutocompleteType.address },\n })\n\n return response.data.predictions\n } catch (error) {\n console.error(error)\n }\n}\n\ntype Place = {\n place_id?: string\n address?: string\n}\n/**\n * This is the exported function that calls the Google api to fetch the location based on the place_id or address.\n */\nexport const fetchLocation = async (\n place: Place,\n key: string\n): Promise<Partial<PlaceData> | undefined> => {\n try {\n if (place.place_id) {\n const placeDetails = await getPlaceDetails(place.place_id, key)\n if (placeDetails) return placeDetails\n }\n if (place.address) {\n const result = await geocode(place.address, key)\n const firstAddress = result?.[0]\n return firstAddress\n }\n\n return undefined\n } catch (error) {\n console.error('Error fetching location:', error)\n }\n}\n\n/**\n * If you have a place ID, you can use the placeDetails method to get more information about a place.\n * The advantage over an address is that there will be no ambiguity about the location.\n * @param place_id\n * @param key\n * @returns\n */\nexport const getPlaceDetails = async (place_id: string, key: string) => {\n try {\n const response = await client.placeDetails({\n params: { place_id, key },\n })\n\n return response.data.result\n } catch (error) {\n console.error(error)\n }\n}\n\n/**\n * The geocode method is used to convert an address into actual location(s) with lat/long.\n */\nexport const geocode = async (address: string, key: string) => {\n try {\n const response = await client.geocode({\n params: { address, key },\n })\n\n return response.data.results\n } catch (error) {\n console.error(error)\n }\n}\n","'use client'\n\nimport MapComponent from '@/components/ui/MapComponent'\nimport { fetchLocation } from '@/lib/google'\nimport { useEffect, useState } from 'react'\n\nconst API_KEY = process.env.NEXT_PUBLIC_GOOGLE_API_KEY ?? ''\nconst MAP_ID = process.env.NEXT_PUBLIC_GOOGLE_MAP_ID ?? ''\n\nfunction MapComponentDemo() {\n const [position, setPosition] = useState<{ lat: number; lng: number } | undefined>()\n\n const place = {\n place_id: 'ChIJaXQRs6lZwokRY6EFpJnhNNE', // Empire State Building Place ID\n address: 'Empire State Building, New York, NY, USA',\n }\n\n useEffect(() => {\n fetchLocation(place, API_KEY).then((location) => {\n if (location) {\n const { lat, lng } = location.geometry?.location ?? {}\n if (!lat || !lng) return\n\n setPosition({ lat, lng })\n }\n })\n }, [])\n\n return (\n <MapComponent\n apiKey={API_KEY}\n mapId={MAP_ID}\n className=\"h-[36rem] w-[36rem] p-4\"\n position={position}\n />\n )\n}\n\nexport default MapComponentDemo\n"],"mappings":";;;AAEA,SAAS,aAAa,KAAK,gBAAgB,WAAW;;;ACFtD,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADwBc;AAhBd,SAAS,aAAa,EAAE,QAAQ,OAAO,UAAU,WAAW,OAAO,GAAG,GAAgC;AACpG,QAAM,kBAAkB,EAAE,KAAK,WAAW,KAAK,UAAW;AAC1D,QAAM,cAAc;AAEpB,SACE,oBAAC,eAAY,QACX,8BAAC,SAAI,WAAW,GAAG,uBAAuB,SAAS,GACjD;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,WAAW,OAAO;AAAA,MACxB,QAAQ,YAAY;AAAA,MACpB;AAAA,MACA,mBAAmB;AAAA,MACnB,kBAAgB;AAAA,MAEf,sBACC,oBAAC,kBAAe,UACd,8BAAC,OAAI,YAAW,WAAU,aAAY,WAAU,YAAW,WAAU,GACvE;AAAA;AAAA,EAEJ,GACF,GACF;AAEJ;AAEA,IAAO,uBAAQ;;;AEpCf,SAAS,QAAQ,6BAAwC;AAEzD,IAAM,SAAS,IAAI,OAAO;AAqBnB,IAAM,gBAAgB,OAC3B,OACA,QAC4C;AAC5C,MAAI;AACF,QAAI,MAAM,UAAU;AAClB,YAAM,eAAe,MAAM,gBAAgB,MAAM,UAAU,GAAG;AAC9D,UAAI,aAAc,QAAO;AAAA,IAC3B;AACA,QAAI,MAAM,SAAS;AACjB,YAAM,SAAS,MAAM,QAAQ,MAAM,SAAS,GAAG;AAC/C,YAAM,eAAe,SAAS,CAAC;AAC/B,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,SAAS,OAAO;AACd,YAAQ,MAAM,4BAA4B,KAAK;AAAA,EACjD;AACF;AASO,IAAM,kBAAkB,OAAO,UAAkB,QAAgB;AACtE,MAAI;AACF,UAAM,WAAW,MAAM,OAAO,aAAa;AAAA,MACzC,QAAQ,EAAE,UAAU,IAAI;AAAA,IAC1B,CAAC;AAED,WAAO,SAAS,KAAK;AAAA,EACvB,SAAS,OAAO;AACd,YAAQ,MAAM,KAAK;AAAA,EACrB;AACF;AAKO,IAAM,UAAU,OAAO,SAAiB,QAAgB;AAC7D,MAAI;AACF,UAAM,WAAW,MAAM,OAAO,QAAQ;AAAA,MACpC,QAAQ,EAAE,SAAS,IAAI;AAAA,IACzB,CAAC;AAED,WAAO,SAAS,KAAK;AAAA,EACvB,SAAS,OAAO;AACd,YAAQ,MAAM,KAAK;AAAA,EACrB;AACF;;;AC1EA,SAAS,WAAW,gBAAgB;AAyBhC,gBAAAA,YAAA;AAvBJ,IAAM,UAAU,QAAQ,IAAI,8BAA8B;AAC1D,IAAM,SAAS,QAAQ,IAAI,6BAA6B;AAExD,SAAS,mBAAmB;AAC1B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAmD;AAEnF,QAAM,QAAQ;AAAA,IACZ,UAAU;AAAA;AAAA,IACV,SAAS;AAAA,EACX;AAEA,YAAU,MAAM;AACd,kBAAc,OAAO,OAAO,EAAE,KAAK,CAAC,aAAa;AAC/C,UAAI,UAAU;AACZ,cAAM,EAAE,KAAK,IAAI,IAAI,SAAS,UAAU,YAAY,CAAC;AACrD,YAAI,CAAC,OAAO,CAAC,IAAK;AAElB,oBAAY,EAAE,KAAK,IAAI,CAAC;AAAA,MAC1B;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAU;AAAA,MACV;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,2BAAQ;","names":["jsx"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/demos/PlacesQueryInputDemo.tsx","../../../src/components/primitives/command.tsx","../../../src/lib/utils.ts","../../../src/components/primitives/dialog.tsx","../../../src/lib/google.ts","../../../src/components/ui/PlacesQueryInput.tsx"],"sourcesContent":["'use client'\n\nimport PlacesQueryInput from '@/components/ui/PlacesQueryInput'\nimport { useState } from 'react'\n\ninterface Place {\n description: string\n place_id: string\n}\n\nfunction PlacesQueryInputDemo() {\n const [selected, setSelected] = useState<Place | undefined>()\n\n return (\n <div className=\"flex h-24 flex-col p-4\">\n <PlacesQueryInput\n className=\"max-w-96\"\n apiKey={process.env.NEXT_PUBLIC_GOOGLE_API_KEY ?? ''}\n selected={selected}\n onSelect={setSelected}\n />\n <h3 className=\"px-3\">{selected?.description}</h3>\n </div>\n )\n}\n\nexport default PlacesQueryInputDemo\n","'use client'\n\nimport { type DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search } from 'lucide-react'\nimport * as React from 'react'\n\nimport { Dialog, DialogContent } from '@/components/primitives/dialog'\n\nimport { cn } from '@/lib/utils'\n\nconst Command = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive\n ref={ref}\n className={cn(\n 'flex h-full w-full flex-col overflow-hidden rounded-xl bg-white text-neutral-950',\n className\n )}\n {...props}\n />\n))\nCommand.displayName = CommandPrimitive.displayName\n\ntype CommandDialogProps = DialogProps\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n return (\n <Dialog {...props}>\n <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n {children}\n </Command>\n </DialogContent>\n </Dialog>\n )\n}\n\nconst CommandInput = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Input>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n <div className=\"m-1 flex items-center rounded-xl border px-3\" cmdk-input-wrapper=\"\">\n <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n <CommandPrimitive.Input\n ref={ref}\n className={cn(\n 'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50',\n className\n )}\n {...props}\n />\n </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.List\n ref={ref}\n className={cn('overflow-y-auto overflow-x-hidden', className)}\n {...props}\n />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Empty>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Group>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Group\n ref={ref}\n className={cn(\n 'overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500',\n className\n )}\n {...props}\n />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Separator\n ref={ref}\n className={cn('-mx-1 h-px bg-neutral-200', className)}\n {...props}\n />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Item\n ref={ref}\n className={cn(\n \"relative flex cursor-pointer select-none items-center rounded-xl px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50\",\n className\n )}\n {...props}\n />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n return (\n <span\n className={cn('ml-auto text-xs tracking-widest text-neutral-500', className)}\n {...props}\n />\n )\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n}\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","'use client'\n\nimport { cn } from '@/lib/utils'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport * as React from 'react'\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n className\n )}\n {...props}\n />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n <DialogPortal>\n <DialogOverlay />\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950',\n className\n )}\n {...props}\n >\n {children}\n <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400\">\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n </DialogPrimitive.Content>\n </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}\n {...props}\n />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn('text-lg font-semibold leading-none tracking-tight', className)}\n {...props}\n />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('text-sm text-neutral-500 dark:text-neutral-400', className)}\n {...props}\n />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n}\n","'use server'\n\nimport { Client, PlaceAutocompleteType } from '@googlemaps/google-maps-services-js'\n\nconst client = new Client()\nexport const autocomplete = async (input: string, key: string) => {\n try {\n const response = await client.placeAutocomplete({\n params: { input, key, types: PlaceAutocompleteType.address },\n })\n\n return response.data.predictions\n } catch (error) {\n console.error(error)\n }\n}\n","'use client'\n\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '@/components/primitives/command'\nimport { autocomplete } from '@/lib/google'\nimport { cn } from '@/lib/utils'\nimport { type PlaceAutocompleteResult } from '@googlemaps/google-maps-services-js'\nimport { CircleX, LoaderCircle } from 'lucide-react'\nimport { useState, useCallback, useRef, useEffect } from 'react'\n\n/**\n * The idea is of this type is to have a more specific type for the Place object,\n * without the repos that use it having to import the PlaceAutocompleteResult type.\n * 'place_id' can be used to query the Google Places API directly for more information about the place.\n */\nexport type Place = Pick<PlaceAutocompleteResult, 'description' | 'place_id'>\n\ninterface PlacesQueryInputProps {\n apiKey: string\n selected?: Place\n onSelect: (place?: Place) => void\n className?: string\n}\n\nfunction PlacesQueryInput({\n apiKey,\n selected,\n onSelect,\n className,\n}: Readonly<PlacesQueryInputProps>) {\n const [predictions, setPredictions] = useState<PlaceAutocompleteResult[] | null>(null)\n const [input, setInput] = useState(selected?.description ?? '')\n const [isLoadingPredictions, setIsLoadingPredictions] = useState(false)\n const [shouldOpenUpward, setShouldOpenUpward] = useState(false)\n const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n const inputRef = useRef<HTMLDivElement | null>(null)\n\n const debouncedAutocomplete = useCallback((value: string) => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n }\n\n timeoutRef.current = setTimeout(async () => {\n if (value.length > 2) {\n setIsLoadingPredictions(true)\n const fetchedPredictions = await autocomplete(value, apiKey)\n fetchedPredictions && setIsLoadingPredictions(false)\n setPredictions(fetchedPredictions ?? [])\n } else {\n setPredictions(null)\n }\n }, 300)\n }, [])\n\n const handleInputChange = (value: string) => {\n setInput(value)\n debouncedAutocomplete(value)\n }\n\n const handleSelect = (prediction: PlaceAutocompleteResult) => {\n onSelect(prediction)\n setPredictions(null)\n setInput(prediction.description)\n }\n\n const handleClear = () => {\n onSelect()\n setPredictions(null)\n setInput('')\n }\n\n /** Close the dropdown when the input loses focus, with the timeout to allow the user to click on a prediction.\n * */\n const handleBlur = () => setTimeout(() => setPredictions(null), 200)\n\n useEffect(() => {\n const checkDropdownPosition = () => {\n if (inputRef.current) {\n const rect = inputRef.current.getBoundingClientRect()\n const windowHeight = window.innerHeight\n setShouldOpenUpward(rect.bottom + 200 > windowHeight)\n }\n }\n\n checkDropdownPosition()\n window.addEventListener('resize', checkDropdownPosition)\n return () => window.removeEventListener('resize', checkDropdownPosition)\n }, [])\n\n return (\n <div className={cn('relative w-full', className)} ref={inputRef} onBlur={handleBlur}>\n <Command>\n <div className=\"relative w-full\">\n <CommandInput\n placeholder=\"Type an address to search...\"\n value={input}\n onValueChange={handleInputChange}\n className=\"truncate pr-8\"\n />\n {isLoadingPredictions && (\n <LoaderCircle className=\"absolute inset-y-0 right-2 my-auto flex h-8 w-8 animate-spin items-center justify-center rounded-full text-green-100\" />\n )}\n {input && (\n <button\n type=\"button\"\n className=\"absolute inset-y-0 right-2 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20\"\n onClick={handleClear}\n >\n <CircleX className=\"h-4 w-4 text-green-100\" />\n </button>\n )}\n </div>\n {predictions && (\n <CommandList\n className={cn(\n 'absolute z-50 w-full rounded-md border bg-white shadow-lg',\n shouldOpenUpward ? 'bottom-full' : 'top-full'\n )}\n >\n <CommandEmpty>No results</CommandEmpty>\n <CommandGroup>\n {predictions.map((prediction) => (\n <CommandItem\n key={prediction.place_id}\n onSelect={() => handleSelect(prediction)}\n className=\"truncate\"\n >\n {prediction.description}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n )}\n </Command>\n </div>\n )\n}\n\nexport default PlacesQueryInput\n"],"mappings":"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","names":["import_lucide_react","React","import_jsx_runtime","CommandPrimitive","CommandPrimitive","import_lucide_react","import_jsx_runtime","import_react","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/demos/PlacesQueryInputDemo.tsx","../../../src/components/primitives/command.tsx","../../../src/lib/utils.ts","../../../src/components/primitives/dialog.tsx","../../../src/lib/google.ts","../../../src/components/ui/PlacesQueryInput.tsx"],"sourcesContent":["'use client'\n\nimport PlacesQueryInput from '@/components/ui/PlacesQueryInput'\nimport { useState } from 'react'\n\ninterface Place {\n description: string\n place_id: string\n}\n\nfunction PlacesQueryInputDemo() {\n const [selected, setSelected] = useState<Place | undefined>()\n\n return (\n <div className=\"flex h-24 flex-col p-4\">\n <PlacesQueryInput\n className=\"max-w-96\"\n apiKey={process.env.NEXT_PUBLIC_GOOGLE_API_KEY ?? ''}\n selected={selected}\n onSelect={setSelected}\n />\n <h3 className=\"px-3\">{selected?.description}</h3>\n </div>\n )\n}\n\nexport default PlacesQueryInputDemo\n","'use client'\n\nimport { type DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search } from 'lucide-react'\nimport * as React from 'react'\n\nimport { Dialog, DialogContent } from '@/components/primitives/dialog'\n\nimport { cn } from '@/lib/utils'\n\nconst Command = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive\n ref={ref}\n className={cn(\n 'flex h-full w-full flex-col overflow-hidden rounded-xl bg-white text-neutral-950',\n className\n )}\n {...props}\n />\n))\nCommand.displayName = CommandPrimitive.displayName\n\ntype CommandDialogProps = DialogProps\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n return (\n <Dialog {...props}>\n <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n {children}\n </Command>\n </DialogContent>\n </Dialog>\n )\n}\n\nconst CommandInput = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Input>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n <div className=\"m-1 flex items-center rounded-xl border px-3\" cmdk-input-wrapper=\"\">\n <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n <CommandPrimitive.Input\n ref={ref}\n className={cn(\n 'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50',\n className\n )}\n {...props}\n />\n </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.List\n ref={ref}\n className={cn('overflow-y-auto overflow-x-hidden', className)}\n {...props}\n />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Empty>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Group>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Group\n ref={ref}\n className={cn(\n 'overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500',\n className\n )}\n {...props}\n />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Separator\n ref={ref}\n className={cn('-mx-1 h-px bg-neutral-200', className)}\n {...props}\n />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Item\n ref={ref}\n className={cn(\n \"relative flex cursor-pointer select-none items-center rounded-xl px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50\",\n className\n )}\n {...props}\n />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n return (\n <span\n className={cn('ml-auto text-xs tracking-widest text-neutral-500', className)}\n {...props}\n />\n )\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n}\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","'use client'\n\nimport { cn } from '@/lib/utils'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport * as React from 'react'\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n className\n )}\n {...props}\n />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n <DialogPortal>\n <DialogOverlay />\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950',\n className\n )}\n {...props}\n >\n {children}\n <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400\">\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n </DialogPrimitive.Content>\n </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}\n {...props}\n />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn('text-lg font-semibold leading-none tracking-tight', className)}\n {...props}\n />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('text-sm text-neutral-500 dark:text-neutral-400', className)}\n {...props}\n />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n}\n","'use server'\n\nimport { Client, PlaceAutocompleteType, PlaceData } from '@googlemaps/google-maps-services-js'\n\nconst client = new Client()\n\nexport const autocomplete = async (input: string, key: string) => {\n try {\n const response = await client.placeAutocomplete({\n params: { input, key, types: PlaceAutocompleteType.address },\n })\n\n return response.data.predictions\n } catch (error) {\n console.error(error)\n }\n}\n\ntype Place = {\n place_id?: string\n address?: string\n}\n/**\n * This is the exported function that calls the Google api to fetch the location based on the place_id or address.\n */\nexport const fetchLocation = async (\n place: Place,\n key: string\n): Promise<Partial<PlaceData> | undefined> => {\n try {\n if (place.place_id) {\n const placeDetails = await getPlaceDetails(place.place_id, key)\n if (placeDetails) return placeDetails\n }\n if (place.address) {\n const result = await geocode(place.address, key)\n const firstAddress = result?.[0]\n return firstAddress\n }\n\n return undefined\n } catch (error) {\n console.error('Error fetching location:', error)\n }\n}\n\n/**\n * If you have a place ID, you can use the placeDetails method to get more information about a place.\n * The advantage over an address is that there will be no ambiguity about the location.\n * @param place_id\n * @param key\n * @returns\n */\nexport const getPlaceDetails = async (place_id: string, key: string) => {\n try {\n const response = await client.placeDetails({\n params: { place_id, key },\n })\n\n return response.data.result\n } catch (error) {\n console.error(error)\n }\n}\n\n/**\n * The geocode method is used to convert an address into actual location(s) with lat/long.\n */\nexport const geocode = async (address: string, key: string) => {\n try {\n const response = await client.geocode({\n params: { address, key },\n })\n\n return response.data.results\n } catch (error) {\n console.error(error)\n }\n}\n","'use client'\n\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '@/components/primitives/command'\nimport { autocomplete } from '@/lib/google'\nimport { cn } from '@/lib/utils'\nimport { type PlaceAutocompleteResult } from '@googlemaps/google-maps-services-js'\nimport { CircleX, LoaderCircle } from 'lucide-react'\nimport { useState, useCallback, useRef, useEffect } from 'react'\n\n/**\n * The idea is of this type is to have a more specific type for the Place object,\n * without the repos that use it having to import the PlaceAutocompleteResult type.\n * 'place_id' can be used to query the Google Places API directly for more information about the place.\n */\nexport type Place = Pick<PlaceAutocompleteResult, 'description' | 'place_id'>\n\ninterface PlacesQueryInputProps {\n apiKey: string\n selected?: Place\n onSelect: (place?: Place) => void\n className?: string\n}\n\nfunction PlacesQueryInput({\n apiKey,\n selected,\n onSelect,\n className,\n}: Readonly<PlacesQueryInputProps>) {\n const [predictions, setPredictions] = useState<PlaceAutocompleteResult[] | null>(null)\n const [input, setInput] = useState(selected?.description ?? '')\n const [isLoadingPredictions, setIsLoadingPredictions] = useState(false)\n const [shouldOpenUpward, setShouldOpenUpward] = useState(false)\n const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n const inputRef = useRef<HTMLDivElement | null>(null)\n\n const debouncedAutocomplete = useCallback((value: string) => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n }\n\n timeoutRef.current = setTimeout(async () => {\n if (value.length > 2) {\n setIsLoadingPredictions(true)\n const fetchedPredictions = await autocomplete(value, apiKey)\n fetchedPredictions && setIsLoadingPredictions(false)\n setPredictions(fetchedPredictions ?? [])\n } else {\n setPredictions(null)\n }\n }, 300)\n }, [])\n\n const handleInputChange = (value: string) => {\n setInput(value)\n debouncedAutocomplete(value)\n }\n\n const handleSelect = (prediction: PlaceAutocompleteResult) => {\n onSelect(prediction)\n setPredictions(null)\n setInput(prediction.description)\n }\n\n const handleClear = () => {\n onSelect()\n setPredictions(null)\n setInput('')\n }\n\n /** Close the dropdown when the input loses focus, with the timeout to allow the user to click on a prediction.\n * */\n const handleBlur = () => setTimeout(() => setPredictions(null), 200)\n\n useEffect(() => {\n const checkDropdownPosition = () => {\n if (inputRef.current) {\n const rect = inputRef.current.getBoundingClientRect()\n const windowHeight = window.innerHeight\n setShouldOpenUpward(rect.bottom + 200 > windowHeight)\n }\n }\n\n checkDropdownPosition()\n window.addEventListener('resize', checkDropdownPosition)\n return () => window.removeEventListener('resize', checkDropdownPosition)\n }, [])\n\n return (\n <div className={cn('relative w-full', className)} ref={inputRef} onBlur={handleBlur}>\n <Command>\n <div className=\"relative w-full\">\n <CommandInput\n placeholder=\"Type an address to search...\"\n value={input}\n onValueChange={handleInputChange}\n className=\"truncate pr-8\"\n />\n {isLoadingPredictions && (\n <LoaderCircle className=\"absolute inset-y-0 right-2 my-auto flex h-8 w-8 animate-spin items-center justify-center rounded-full text-green-100\" />\n )}\n {input && (\n <button\n type=\"button\"\n className=\"absolute inset-y-0 right-2 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20\"\n onClick={handleClear}\n >\n <CircleX className=\"h-4 w-4 text-green-100\" />\n </button>\n )}\n </div>\n {predictions && (\n <CommandList\n className={cn(\n 'absolute z-50 w-full rounded-md border bg-white shadow-lg',\n shouldOpenUpward ? 'bottom-full' : 'top-full'\n )}\n >\n <CommandEmpty>No results</CommandEmpty>\n <CommandGroup>\n {predictions.map((prediction) => (\n <CommandItem\n key={prediction.place_id}\n onSelect={() => handleSelect(prediction)}\n className=\"truncate\"\n >\n {prediction.description}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n )}\n </Command>\n </div>\n )\n}\n\nexport default PlacesQueryInput\n"],"mappings":"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","names":["import_lucide_react","React","import_jsx_runtime","CommandPrimitive","CommandPrimitive","import_lucide_react","import_jsx_runtime","import_react","import_jsx_runtime"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/primitives/command.tsx","../../../src/lib/utils.ts","../../../src/components/primitives/dialog.tsx","../../../src/lib/google.ts","../../../src/components/ui/PlacesQueryInput.tsx","../../../src/components/demos/PlacesQueryInputDemo.tsx"],"sourcesContent":["'use client'\n\nimport { type DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search } from 'lucide-react'\nimport * as React from 'react'\n\nimport { Dialog, DialogContent } from '@/components/primitives/dialog'\n\nimport { cn } from '@/lib/utils'\n\nconst Command = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive\n ref={ref}\n className={cn(\n 'flex h-full w-full flex-col overflow-hidden rounded-xl bg-white text-neutral-950',\n className\n )}\n {...props}\n />\n))\nCommand.displayName = CommandPrimitive.displayName\n\ntype CommandDialogProps = DialogProps\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n return (\n <Dialog {...props}>\n <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n {children}\n </Command>\n </DialogContent>\n </Dialog>\n )\n}\n\nconst CommandInput = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Input>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n <div className=\"m-1 flex items-center rounded-xl border px-3\" cmdk-input-wrapper=\"\">\n <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n <CommandPrimitive.Input\n ref={ref}\n className={cn(\n 'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50',\n className\n )}\n {...props}\n />\n </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.List\n ref={ref}\n className={cn('overflow-y-auto overflow-x-hidden', className)}\n {...props}\n />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Empty>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Group>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Group\n ref={ref}\n className={cn(\n 'overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500',\n className\n )}\n {...props}\n />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Separator\n ref={ref}\n className={cn('-mx-1 h-px bg-neutral-200', className)}\n {...props}\n />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Item\n ref={ref}\n className={cn(\n \"relative flex cursor-pointer select-none items-center rounded-xl px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50\",\n className\n )}\n {...props}\n />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n return (\n <span\n className={cn('ml-auto text-xs tracking-widest text-neutral-500', className)}\n {...props}\n />\n )\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n}\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","'use client'\n\nimport { cn } from '@/lib/utils'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport * as React from 'react'\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n className\n )}\n {...props}\n />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n <DialogPortal>\n <DialogOverlay />\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950',\n className\n )}\n {...props}\n >\n {children}\n <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400\">\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n </DialogPrimitive.Content>\n </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}\n {...props}\n />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn('text-lg font-semibold leading-none tracking-tight', className)}\n {...props}\n />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('text-sm text-neutral-500 dark:text-neutral-400', className)}\n {...props}\n />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n}\n","'use server'\n\nimport { Client, PlaceAutocompleteType } from '@googlemaps/google-maps-services-js'\n\nconst client = new Client()\nexport const autocomplete = async (input: string, key: string) => {\n try {\n const response = await client.placeAutocomplete({\n params: { input, key, types: PlaceAutocompleteType.address },\n })\n\n return response.data.predictions\n } catch (error) {\n console.error(error)\n }\n}\n","'use client'\n\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '@/components/primitives/command'\nimport { autocomplete } from '@/lib/google'\nimport { cn } from '@/lib/utils'\nimport { type PlaceAutocompleteResult } from '@googlemaps/google-maps-services-js'\nimport { CircleX, LoaderCircle } from 'lucide-react'\nimport { useState, useCallback, useRef, useEffect } from 'react'\n\n/**\n * The idea is of this type is to have a more specific type for the Place object,\n * without the repos that use it having to import the PlaceAutocompleteResult type.\n * 'place_id' can be used to query the Google Places API directly for more information about the place.\n */\nexport type Place = Pick<PlaceAutocompleteResult, 'description' | 'place_id'>\n\ninterface PlacesQueryInputProps {\n apiKey: string\n selected?: Place\n onSelect: (place?: Place) => void\n className?: string\n}\n\nfunction PlacesQueryInput({\n apiKey,\n selected,\n onSelect,\n className,\n}: Readonly<PlacesQueryInputProps>) {\n const [predictions, setPredictions] = useState<PlaceAutocompleteResult[] | null>(null)\n const [input, setInput] = useState(selected?.description ?? '')\n const [isLoadingPredictions, setIsLoadingPredictions] = useState(false)\n const [shouldOpenUpward, setShouldOpenUpward] = useState(false)\n const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n const inputRef = useRef<HTMLDivElement | null>(null)\n\n const debouncedAutocomplete = useCallback((value: string) => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n }\n\n timeoutRef.current = setTimeout(async () => {\n if (value.length > 2) {\n setIsLoadingPredictions(true)\n const fetchedPredictions = await autocomplete(value, apiKey)\n fetchedPredictions && setIsLoadingPredictions(false)\n setPredictions(fetchedPredictions ?? [])\n } else {\n setPredictions(null)\n }\n }, 300)\n }, [])\n\n const handleInputChange = (value: string) => {\n setInput(value)\n debouncedAutocomplete(value)\n }\n\n const handleSelect = (prediction: PlaceAutocompleteResult) => {\n onSelect(prediction)\n setPredictions(null)\n setInput(prediction.description)\n }\n\n const handleClear = () => {\n onSelect()\n setPredictions(null)\n setInput('')\n }\n\n /** Close the dropdown when the input loses focus, with the timeout to allow the user to click on a prediction.\n * */\n const handleBlur = () => setTimeout(() => setPredictions(null), 200)\n\n useEffect(() => {\n const checkDropdownPosition = () => {\n if (inputRef.current) {\n const rect = inputRef.current.getBoundingClientRect()\n const windowHeight = window.innerHeight\n setShouldOpenUpward(rect.bottom + 200 > windowHeight)\n }\n }\n\n checkDropdownPosition()\n window.addEventListener('resize', checkDropdownPosition)\n return () => window.removeEventListener('resize', checkDropdownPosition)\n }, [])\n\n return (\n <div className={cn('relative w-full', className)} ref={inputRef} onBlur={handleBlur}>\n <Command>\n <div className=\"relative w-full\">\n <CommandInput\n placeholder=\"Type an address to search...\"\n value={input}\n onValueChange={handleInputChange}\n className=\"truncate pr-8\"\n />\n {isLoadingPredictions && (\n <LoaderCircle className=\"absolute inset-y-0 right-2 my-auto flex h-8 w-8 animate-spin items-center justify-center rounded-full text-green-100\" />\n )}\n {input && (\n <button\n type=\"button\"\n className=\"absolute inset-y-0 right-2 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20\"\n onClick={handleClear}\n >\n <CircleX className=\"h-4 w-4 text-green-100\" />\n </button>\n )}\n </div>\n {predictions && (\n <CommandList\n className={cn(\n 'absolute z-50 w-full rounded-md border bg-white shadow-lg',\n shouldOpenUpward ? 'bottom-full' : 'top-full'\n )}\n >\n <CommandEmpty>No results</CommandEmpty>\n <CommandGroup>\n {predictions.map((prediction) => (\n <CommandItem\n key={prediction.place_id}\n onSelect={() => handleSelect(prediction)}\n className=\"truncate\"\n >\n {prediction.description}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n )}\n </Command>\n </div>\n )\n}\n\nexport default PlacesQueryInput\n","'use client'\n\nimport PlacesQueryInput from '@/components/ui/PlacesQueryInput'\nimport { useState } from 'react'\n\ninterface Place {\n description: string\n place_id: string\n}\n\nfunction PlacesQueryInputDemo() {\n const [selected, setSelected] = useState<Place | undefined>()\n\n return (\n <div className=\"flex h-24 flex-col p-4\">\n <PlacesQueryInput\n className=\"max-w-96\"\n apiKey={process.env.NEXT_PUBLIC_GOOGLE_API_KEY ?? ''}\n selected={selected}\n onSelect={setSelected}\n />\n <h3 className=\"px-3\">{selected?.description}</h3>\n </div>\n )\n}\n\nexport default PlacesQueryInputDemo\n"],"mappings":"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","names":["React","jsx","jsxs","jsxs","jsx","jsx","jsxs","useState","jsx","jsxs"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/primitives/command.tsx","../../../src/lib/utils.ts","../../../src/components/primitives/dialog.tsx","../../../src/lib/google.ts","../../../src/components/ui/PlacesQueryInput.tsx","../../../src/components/demos/PlacesQueryInputDemo.tsx"],"sourcesContent":["'use client'\n\nimport { type DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search } from 'lucide-react'\nimport * as React from 'react'\n\nimport { Dialog, DialogContent } from '@/components/primitives/dialog'\n\nimport { cn } from '@/lib/utils'\n\nconst Command = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive\n ref={ref}\n className={cn(\n 'flex h-full w-full flex-col overflow-hidden rounded-xl bg-white text-neutral-950',\n className\n )}\n {...props}\n />\n))\nCommand.displayName = CommandPrimitive.displayName\n\ntype CommandDialogProps = DialogProps\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n return (\n <Dialog {...props}>\n <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n {children}\n </Command>\n </DialogContent>\n </Dialog>\n )\n}\n\nconst CommandInput = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Input>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n <div className=\"m-1 flex items-center rounded-xl border px-3\" cmdk-input-wrapper=\"\">\n <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n <CommandPrimitive.Input\n ref={ref}\n className={cn(\n 'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50',\n className\n )}\n {...props}\n />\n </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.List\n ref={ref}\n className={cn('overflow-y-auto overflow-x-hidden', className)}\n {...props}\n />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Empty>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Group>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Group\n ref={ref}\n className={cn(\n 'overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500',\n className\n )}\n {...props}\n />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Separator\n ref={ref}\n className={cn('-mx-1 h-px bg-neutral-200', className)}\n {...props}\n />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n <CommandPrimitive.Item\n ref={ref}\n className={cn(\n \"relative flex cursor-pointer select-none items-center rounded-xl px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50\",\n className\n )}\n {...props}\n />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n return (\n <span\n className={cn('ml-auto text-xs tracking-widest text-neutral-500', className)}\n {...props}\n />\n )\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n}\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","'use client'\n\nimport { cn } from '@/lib/utils'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport * as React from 'react'\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n className\n )}\n {...props}\n />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n <DialogPortal>\n <DialogOverlay />\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950',\n className\n )}\n {...props}\n >\n {children}\n <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400\">\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n </DialogPrimitive.Content>\n </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}\n {...props}\n />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn('text-lg font-semibold leading-none tracking-tight', className)}\n {...props}\n />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('text-sm text-neutral-500 dark:text-neutral-400', className)}\n {...props}\n />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n}\n","'use server'\n\nimport { Client, PlaceAutocompleteType, PlaceData } from '@googlemaps/google-maps-services-js'\n\nconst client = new Client()\n\nexport const autocomplete = async (input: string, key: string) => {\n try {\n const response = await client.placeAutocomplete({\n params: { input, key, types: PlaceAutocompleteType.address },\n })\n\n return response.data.predictions\n } catch (error) {\n console.error(error)\n }\n}\n\ntype Place = {\n place_id?: string\n address?: string\n}\n/**\n * This is the exported function that calls the Google api to fetch the location based on the place_id or address.\n */\nexport const fetchLocation = async (\n place: Place,\n key: string\n): Promise<Partial<PlaceData> | undefined> => {\n try {\n if (place.place_id) {\n const placeDetails = await getPlaceDetails(place.place_id, key)\n if (placeDetails) return placeDetails\n }\n if (place.address) {\n const result = await geocode(place.address, key)\n const firstAddress = result?.[0]\n return firstAddress\n }\n\n return undefined\n } catch (error) {\n console.error('Error fetching location:', error)\n }\n}\n\n/**\n * If you have a place ID, you can use the placeDetails method to get more information about a place.\n * The advantage over an address is that there will be no ambiguity about the location.\n * @param place_id\n * @param key\n * @returns\n */\nexport const getPlaceDetails = async (place_id: string, key: string) => {\n try {\n const response = await client.placeDetails({\n params: { place_id, key },\n })\n\n return response.data.result\n } catch (error) {\n console.error(error)\n }\n}\n\n/**\n * The geocode method is used to convert an address into actual location(s) with lat/long.\n */\nexport const geocode = async (address: string, key: string) => {\n try {\n const response = await client.geocode({\n params: { address, key },\n })\n\n return response.data.results\n } catch (error) {\n console.error(error)\n }\n}\n","'use client'\n\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '@/components/primitives/command'\nimport { autocomplete } from '@/lib/google'\nimport { cn } from '@/lib/utils'\nimport { type PlaceAutocompleteResult } from '@googlemaps/google-maps-services-js'\nimport { CircleX, LoaderCircle } from 'lucide-react'\nimport { useState, useCallback, useRef, useEffect } from 'react'\n\n/**\n * The idea is of this type is to have a more specific type for the Place object,\n * without the repos that use it having to import the PlaceAutocompleteResult type.\n * 'place_id' can be used to query the Google Places API directly for more information about the place.\n */\nexport type Place = Pick<PlaceAutocompleteResult, 'description' | 'place_id'>\n\ninterface PlacesQueryInputProps {\n apiKey: string\n selected?: Place\n onSelect: (place?: Place) => void\n className?: string\n}\n\nfunction PlacesQueryInput({\n apiKey,\n selected,\n onSelect,\n className,\n}: Readonly<PlacesQueryInputProps>) {\n const [predictions, setPredictions] = useState<PlaceAutocompleteResult[] | null>(null)\n const [input, setInput] = useState(selected?.description ?? '')\n const [isLoadingPredictions, setIsLoadingPredictions] = useState(false)\n const [shouldOpenUpward, setShouldOpenUpward] = useState(false)\n const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n const inputRef = useRef<HTMLDivElement | null>(null)\n\n const debouncedAutocomplete = useCallback((value: string) => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n }\n\n timeoutRef.current = setTimeout(async () => {\n if (value.length > 2) {\n setIsLoadingPredictions(true)\n const fetchedPredictions = await autocomplete(value, apiKey)\n fetchedPredictions && setIsLoadingPredictions(false)\n setPredictions(fetchedPredictions ?? [])\n } else {\n setPredictions(null)\n }\n }, 300)\n }, [])\n\n const handleInputChange = (value: string) => {\n setInput(value)\n debouncedAutocomplete(value)\n }\n\n const handleSelect = (prediction: PlaceAutocompleteResult) => {\n onSelect(prediction)\n setPredictions(null)\n setInput(prediction.description)\n }\n\n const handleClear = () => {\n onSelect()\n setPredictions(null)\n setInput('')\n }\n\n /** Close the dropdown when the input loses focus, with the timeout to allow the user to click on a prediction.\n * */\n const handleBlur = () => setTimeout(() => setPredictions(null), 200)\n\n useEffect(() => {\n const checkDropdownPosition = () => {\n if (inputRef.current) {\n const rect = inputRef.current.getBoundingClientRect()\n const windowHeight = window.innerHeight\n setShouldOpenUpward(rect.bottom + 200 > windowHeight)\n }\n }\n\n checkDropdownPosition()\n window.addEventListener('resize', checkDropdownPosition)\n return () => window.removeEventListener('resize', checkDropdownPosition)\n }, [])\n\n return (\n <div className={cn('relative w-full', className)} ref={inputRef} onBlur={handleBlur}>\n <Command>\n <div className=\"relative w-full\">\n <CommandInput\n placeholder=\"Type an address to search...\"\n value={input}\n onValueChange={handleInputChange}\n className=\"truncate pr-8\"\n />\n {isLoadingPredictions && (\n <LoaderCircle className=\"absolute inset-y-0 right-2 my-auto flex h-8 w-8 animate-spin items-center justify-center rounded-full text-green-100\" />\n )}\n {input && (\n <button\n type=\"button\"\n className=\"absolute inset-y-0 right-2 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20\"\n onClick={handleClear}\n >\n <CircleX className=\"h-4 w-4 text-green-100\" />\n </button>\n )}\n </div>\n {predictions && (\n <CommandList\n className={cn(\n 'absolute z-50 w-full rounded-md border bg-white shadow-lg',\n shouldOpenUpward ? 'bottom-full' : 'top-full'\n )}\n >\n <CommandEmpty>No results</CommandEmpty>\n <CommandGroup>\n {predictions.map((prediction) => (\n <CommandItem\n key={prediction.place_id}\n onSelect={() => handleSelect(prediction)}\n className=\"truncate\"\n >\n {prediction.description}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n )}\n </Command>\n </div>\n )\n}\n\nexport default PlacesQueryInput\n","'use client'\n\nimport PlacesQueryInput from '@/components/ui/PlacesQueryInput'\nimport { useState } from 'react'\n\ninterface Place {\n description: string\n place_id: string\n}\n\nfunction PlacesQueryInputDemo() {\n const [selected, setSelected] = useState<Place | undefined>()\n\n return (\n <div className=\"flex h-24 flex-col p-4\">\n <PlacesQueryInput\n className=\"max-w-96\"\n apiKey={process.env.NEXT_PUBLIC_GOOGLE_API_KEY ?? ''}\n selected={selected}\n onSelect={setSelected}\n />\n <h3 className=\"px-3\">{selected?.description}</h3>\n </div>\n )\n}\n\nexport default PlacesQueryInputDemo\n"],"mappings":"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","names":["React","jsx","jsxs","jsxs","jsx","jsx","jsxs","useState","jsx","jsxs"]}
|
|
@@ -1369,6 +1369,42 @@ var autocomplete = async (input, key) => {
|
|
|
1369
1369
|
console.error(error);
|
|
1370
1370
|
}
|
|
1371
1371
|
};
|
|
1372
|
+
var fetchLocation = async (place, key) => {
|
|
1373
|
+
try {
|
|
1374
|
+
if (place.place_id) {
|
|
1375
|
+
const placeDetails = await getPlaceDetails(place.place_id, key);
|
|
1376
|
+
if (placeDetails) return placeDetails;
|
|
1377
|
+
}
|
|
1378
|
+
if (place.address) {
|
|
1379
|
+
const result = await geocode(place.address, key);
|
|
1380
|
+
const firstAddress = result?.[0];
|
|
1381
|
+
return firstAddress;
|
|
1382
|
+
}
|
|
1383
|
+
return void 0;
|
|
1384
|
+
} catch (error) {
|
|
1385
|
+
console.error("Error fetching location:", error);
|
|
1386
|
+
}
|
|
1387
|
+
};
|
|
1388
|
+
var getPlaceDetails = async (place_id, key) => {
|
|
1389
|
+
try {
|
|
1390
|
+
const response = await client.placeDetails({
|
|
1391
|
+
params: { place_id, key }
|
|
1392
|
+
});
|
|
1393
|
+
return response.data.result;
|
|
1394
|
+
} catch (error) {
|
|
1395
|
+
console.error(error);
|
|
1396
|
+
}
|
|
1397
|
+
};
|
|
1398
|
+
var geocode = async (address, key) => {
|
|
1399
|
+
try {
|
|
1400
|
+
const response = await client.geocode({
|
|
1401
|
+
params: { address, key }
|
|
1402
|
+
});
|
|
1403
|
+
return response.data.results;
|
|
1404
|
+
} catch (error) {
|
|
1405
|
+
console.error(error);
|
|
1406
|
+
}
|
|
1407
|
+
};
|
|
1372
1408
|
|
|
1373
1409
|
// src/components/ui/PlacesQueryInput.tsx
|
|
1374
1410
|
var import_lucide_react11 = require("lucide-react");
|
|
@@ -1495,15 +1531,69 @@ function PlacesQueryInputDemo() {
|
|
|
1495
1531
|
}
|
|
1496
1532
|
var PlacesQueryInputDemo_default = PlacesQueryInputDemo;
|
|
1497
1533
|
|
|
1498
|
-
// src/components/
|
|
1534
|
+
// src/components/ui/MapComponent.tsx
|
|
1535
|
+
var import_react_google_maps = require("@vis.gl/react-google-maps");
|
|
1499
1536
|
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1537
|
+
function MapComponent({ apiKey, mapId, position, className, zoom = 15 }) {
|
|
1538
|
+
const defaultPosition = { lat: 40.715021, lng: -74.00459 };
|
|
1539
|
+
const defaultZoom = 11;
|
|
1540
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_google_maps.APIProvider, { apiKey, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn("h-screen max-w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1541
|
+
import_react_google_maps.Map,
|
|
1542
|
+
{
|
|
1543
|
+
zoom: position ? zoom : defaultZoom,
|
|
1544
|
+
center: position || defaultPosition,
|
|
1545
|
+
mapId,
|
|
1546
|
+
keyboardShortcuts: false,
|
|
1547
|
+
disableDefaultUI: true,
|
|
1548
|
+
children: position && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_google_maps.AdvancedMarker, { position, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_google_maps.Pin, { background: "#0B5441", borderColor: "#EBFDF1", glyphColor: "#D4F500" }) })
|
|
1549
|
+
}
|
|
1550
|
+
) }) });
|
|
1551
|
+
}
|
|
1552
|
+
var MapComponent_default = MapComponent;
|
|
1553
|
+
|
|
1554
|
+
// src/components/demos/MapComponentDemo.tsx
|
|
1555
|
+
var import_react11 = require("react");
|
|
1556
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1557
|
+
var API_KEY = process.env.NEXT_PUBLIC_GOOGLE_API_KEY ?? "";
|
|
1558
|
+
var MAP_ID = process.env.NEXT_PUBLIC_GOOGLE_MAP_ID ?? "";
|
|
1559
|
+
function MapComponentDemo() {
|
|
1560
|
+
const [position, setPosition] = (0, import_react11.useState)();
|
|
1561
|
+
const place = {
|
|
1562
|
+
place_id: "ChIJaXQRs6lZwokRY6EFpJnhNNE",
|
|
1563
|
+
// Empire State Building Place ID
|
|
1564
|
+
address: "Empire State Building, New York, NY, USA"
|
|
1565
|
+
};
|
|
1566
|
+
(0, import_react11.useEffect)(() => {
|
|
1567
|
+
fetchLocation(place, API_KEY).then((location) => {
|
|
1568
|
+
if (location) {
|
|
1569
|
+
const { lat, lng } = location.geometry?.location ?? {};
|
|
1570
|
+
if (!lat || !lng) return;
|
|
1571
|
+
setPosition({ lat, lng });
|
|
1572
|
+
}
|
|
1573
|
+
});
|
|
1574
|
+
}, []);
|
|
1575
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1576
|
+
MapComponent_default,
|
|
1577
|
+
{
|
|
1578
|
+
apiKey: API_KEY,
|
|
1579
|
+
mapId: MAP_ID,
|
|
1580
|
+
className: "h-[36rem] w-[36rem] p-4",
|
|
1581
|
+
position
|
|
1582
|
+
}
|
|
1583
|
+
);
|
|
1584
|
+
}
|
|
1585
|
+
var MapComponentDemo_default = MapComponentDemo;
|
|
1586
|
+
|
|
1587
|
+
// src/components/demos/index.tsx
|
|
1588
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1500
1589
|
function Demos() {
|
|
1501
|
-
return /* @__PURE__ */ (0,
|
|
1502
|
-
/* @__PURE__ */ (0,
|
|
1503
|
-
/* @__PURE__ */ (0,
|
|
1504
|
-
/* @__PURE__ */ (0,
|
|
1505
|
-
/* @__PURE__ */ (0,
|
|
1506
|
-
/* @__PURE__ */ (0,
|
|
1590
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
|
|
1591
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ComboboxDemo_default, {}),
|
|
1592
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SelectDemo_default, {}),
|
|
1593
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InputDemo_default, {}),
|
|
1594
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CounterDemo_default, {}),
|
|
1595
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PlacesQueryInputDemo_default, {}),
|
|
1596
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MapComponentDemo_default, {})
|
|
1507
1597
|
] });
|
|
1508
1598
|
}
|
|
1509
1599
|
var demos_default = Demos;
|