@colabcommerce/elements 0.0.4 → 0.9.1

package/src/components/QuoteFormSearch/index.jsx

@@ -0,0 +1,276 @@
+"use client"
+
+import { useEffect, useId, useMemo, useRef, useState } from "react"
+import { Search, MapPin, Sliders } from "lucide-react"
+import * as Popover from "@radix-ui/react-popover"
+import * as ScrollArea from "@radix-ui/react-scroll-area"
+
+import { Button } from "@/components/ui/Button"
+import { useQuoteForm } from "@/contexts/quote-form"
+import { usePlacesAutocomplete } from "@/lib/usePlacesAutocomplete"
+import Input from "@/components/ui/Input"
+import { useTranslation } from "react-i18next"
+
+function getItemLabel(item) {
+  // Support a few common shapes:
+  // - Google Places autocomplete style: { placePrediction: { text: { text } } }
+  // - Simple: { label }, { description }, { text }
+  return (
+    item?.label ??
+    item?.description ??
+    item?.text ??
+    item?.placePrediction?.text?.text ??
+    item?.placePrediction?.structuredFormat?.mainText?.text ??
+    ""
+  )
+}
+
+function getItemSecondary(item) {
+  return (
+    item?.secondary ??
+    item?.secondary_text ??
+    item?.placePrediction?.structuredFormat?.secondaryText?.text ??
+    item?.placePrediction?.structuredFormat?.secondaryText ??
+    ""
+  )
+}
+
+function getItemId(item, fallback) {
+  return (
+    item?.id ??
+    item?.place_id ??
+    item?.placePrediction?.placeId ??
+    fallback
+  )
+}
+
+export function QuoteFormSearch() {
+
+  const { t } = useTranslation()
+  const [searchQuery, setSearchQuery] = useState("")
+  const [showFilters, setShowFilters] = useState(false)
+
+  // Radix dropdown state
+  const [open, setOpen] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(-1)
+
+  const { location, searchRadius, setSearchRadius, setSearchLocation, setUseLocationType, geoLocation } = useQuoteForm()
+
+  const { results, isLoading, error } = usePlacesAutocomplete({
+    query: searchQuery,
+    apiKey: "AIzaSyAnJmWEU1r63DiRWHkjczxzHyIEq3dhj4M",
+    center: { lat: 37.7937, lng: -122.3965 },
+    radiusMeters: 10000,
+    types: ["locality", "postal_code"],
+  })
+
+  const items = useMemo(() => Array.isArray(results) ? results : [], [results])
+
+  const inputRef = useRef(null)
+  const listId = useId()
+  const activeId = activeIndex >= 0 ? `${listId}-opt-${activeIndex}` : undefined
+
+  // When results change while open, reset the highlighted row
+  useEffect(() => {
+    if (!open) return
+    if (isLoading) return
+    setActiveIndex(items.length ? 0 : -1)
+  }, [open, isLoading, items.length])
+
+  const commitSelection = (item) => {
+    const label = getItemLabel(item)
+    if (!label) return
+
+    setSearchQuery(label)
+    setOpen(false)
+
+    // Keep focus like Google
+    requestAnimationFrame(() => inputRef.current?.focus())
+
+    const locationObject = {
+      "latitude": item.location?.lat ?? null,
+      "longitude": item.location?.lng ?? null,
+      "accuracy": null,
+      "altitude": 0,
+      "altitudeAccuracy": null,
+      "heading": null,
+      "speed": null,
+      "city": item.city ?? null,
+      "region": item.region ?? null,
+      "country": item.country ?? null,
+      "postal": item.postalCode ?? null,
+      "timezone": null,
+      "ip": null,
+      "type": "search",
+      "raw": item
+    }
+
+    setSearchLocation(locationObject)
+    setUseLocationType('search')
+
+    // If your store locator has a method to actually run the search / set coords,
+    // this is where you’d call it, e.g.:
+    // setSelectedPlace(item)
+    // runSearch({ placeId: ..., radius: searchRadius })
+  }
+
+  const onKeyDown = (e) => {
+    // open dropdown with arrows
+    if (!open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+      setOpen(true)
+      return
+    }
+    if (!open) return
+
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault()
+        setActiveIndex((i) => Math.min(i + 1, items.length - 1))
+        break
+      }
+      case "ArrowUp": {
+        e.preventDefault()
+        setActiveIndex((i) => Math.max(i - 1, 0))
+        break
+      }
+      case "Enter": {
+        if (activeIndex >= 0 && items[activeIndex]) {
+          e.preventDefault()
+          commitSelection(items[activeIndex])
+        }
+        break
+      }
+      case "Escape": {
+        e.preventDefault()
+        setOpen(false)
+        break
+      }
+      default:
+        break
+    }
+  }
+
+  const handleUseCurrentLocation = () => {
+    setUseLocationType('geolocation')
+    setOpen(false)
+    setSearchQuery("")
+  }
+
+  const showEmpty =
+    open &&
+    !isLoading &&
+    !error &&
+    searchQuery.trim().length > 0 &&
+    items.length === 0
+
+  return (
+    <div className="max-w-3xl mx-auto">
+      <div className="rounded-xl p-6">
+        <div className="flex flex-row gap-4">
+          <Popover.Root open={open} onOpenChange={setOpen}>
+            <Popover.Anchor asChild>
+              <div className="flex-1 relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
+                <Input
+                  ref={inputRef}
+                  type="text"
+                  placeholder={location?.city ? t('default:location_search_placeholder_w_location', { location: location.city }) : t('default:location_search_placeholder')}
+                  value={searchQuery}
+                  onChange={(e) => {
+                    setSearchQuery(e.target.value)
+                    setOpen(true)
+                  }}
+                  onFocus={() => setOpen(true)}
+                  onKeyDown={onKeyDown}
+                  className="pl-10 h-12"
+                  role="combobox"
+                  aria-autocomplete="list"
+                  aria-expanded={open}
+                  aria-controls={listId}
+                  aria-activedescendant={activeId}
+                />
+              </div>
+            </Popover.Anchor>
+
+            <Popover.Content
+              sideOffset={6}
+              align="start"
+              onOpenAutoFocus={(e) => e.preventDefault()} // keep focus in input
+              className="w-[var(--radix-popover-trigger-width)] max-w-[560px] rounded-xl border rounded bg-background shadow-lg overflow-hidden"
+            >
+              <ScrollArea.Root className="max-h-80">
+                <ScrollArea.Viewport>
+                  <div id={listId} role="listbox" className="p-2">
+                    {error ? (
+                      <div className="px-3 py-2 text-sm rounded-md border border-destructive/30 bg-destructive/10 text-destructive">
+                        {String(error)}
+                      </div>
+                    ) : null}
+
+                    {isLoading ? (
+                      <div className="px-3 py-2 text-sm text-muted-foreground">
+                        {t('default:loading')}
+                      </div>
+                    ) : null}
+
+                    {showEmpty ? (
+                      <div className="px-3 py-2 text-sm text-muted-foreground">
+                        {t('default:no_results')}
+                      </div>
+                    ) : null}
+
+                    {!isLoading && !error && items.map((item, idx) => {
+                      const active = idx === activeIndex
+                      const label = getItemLabel(item)
+                      const secondary = getItemSecondary(item)
+                      const id = getItemId(item, `${idx}`)
+
+                      if (!label) return null
+
+                      return (
+                        <div
+                          key={id}
+                          id={`${listId}-opt-${idx}`}
+                          role="option"
+                          aria-selected={active}
+                          onMouseEnter={() => setActiveIndex(idx)}
+                          onMouseDown={(e) => e.preventDefault()} // keep focus
+                          onClick={() => commitSelection(item)}
+                          className={[
+                            "cursor-pointer rounded-lg px-3 py-2",
+                            active ? "bg-muted" : "hover:bg-muted/60",
+                          ].join(" ")}
+                        >
+                          <div className="text-sm text-left font-medium leading-tight">
+                            {label}
+                          </div>
+                          {secondary ? (
+                            <div className="text-xs text-left text-muted-foreground mt-1 leading-tight">
+                              {secondary}
+                            </div>
+                          ) : null}
+                        </div>
+                      )
+                    })}
+                  </div>
+                </ScrollArea.Viewport>
+
+                <ScrollArea.Scrollbar orientation="vertical" className="flex select-none touch-none p-0.5 bg-transparent">
+                  <ScrollArea.Thumb className="flex-1 bg-border rounded-full" />
+                </ScrollArea.Scrollbar>
+              </ScrollArea.Root>
+            </Popover.Content>
+          </Popover.Root>
+        </div>
+        <div className="mt-2 flex items-center justify-center gap-2 text-sm text-muted-foreground">
+          <MapPin className="w-4 h-4" />
+          <button className="text-primary hover:underline font-medium" type="button" onClick={handleUseCurrentLocation}>
+            {t('default:use_my_location')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default QuoteFormSearch

package/src/components/QuoteFormStoreList/index.jsx

@@ -0,0 +1,65 @@
+import { useState } from "react"
+import { MapPin, Phone, Clock, Navigation, Star } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import StoreListItem from '@/components/QuoteFormStoreListItem'
+import StoreListNoneFound from "@/components/StoreListNoneFound"
+import LoadingPuff from "@/components/ui/LoadingPuff"
+import { distanceBetweenPoints } from '@/lib/utils/measure'
+import { useQuoteForm } from '@/contexts/quote-form'
+
+export function QuoteFormStoreList() {
+
+  const { stores,
+    location,
+    products,
+    setStepIndex,
+    selectedStoreId, setSelectedStoreId, setMessageDialogOpen, setMessageStoreId, searchIsLoading, searchError, baseUrl, focusedStoreId, setFocusedStoreId } = useQuoteForm()
+
+  const handleSelect = (storeId) => {
+    setSelectedStoreId(storeId)
+    setStepIndex(1)
+  }
+
+  return (
+    <div className="space-y-4">
+      {!searchIsLoading && !searchError && stores.length === 0 && (
+        <StoreListNoneFound />
+      )}
+      {searchIsLoading && (
+        <div className="flex items-center justify-center h-48">
+          <LoadingPuff />
+        </div>
+      )}
+      {!searchIsLoading && !searchError && stores.map((store) => (
+        <StoreListItem
+          key={store.id}
+          id={store.id}
+          name={store.retailer_name}
+          placeId={store.place_id}
+          addressLineOne={store.address?.street_line_one}
+          addressLineTwo={store.address?.street_line_two}
+          city={store.address?.city}
+          province={store.address?.province}
+          postalCode={store.address?.postal_code}
+          country={store.address?.country}
+          distance={distanceBetweenPoints(location.latitude, location.longitude, store.address?.latitude, store.address?.longitude)}
+          phone={store.phone_number}
+          hours={store.retailer_location_hours}
+          services={[store.store_type]}
+          isFocused={focusedStoreId === store.id}
+          handleFocus={setFocusedStoreId}
+          href={`${baseUrl}/${store.id}`}
+          handleSelect={handleSelect}
+          locationProducts={store.retailer_location_products}
+          requestedProducts={products}
+        />
+      ))}
+      {!searchIsLoading && searchError && (
+        <div className="text-red-600 text-center">
+          An error occurred while searching for stores. Please try again.
+        </div>
+      )}
+    </div>
+  )
+}
+export default QuoteFormStoreList

package/src/components/QuoteFormStoreListItem/index.jsx

@@ -0,0 +1,134 @@
+import { MapPin, Phone, Clock, Check, CheckCheck, CircleAlert, ChevronDown, Info } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { metersToMiles } from "@/lib/utils/measure"
+import CollapsibleStoreHours from "@/components/CollapsibleStoreHours"
+import { useTranslation } from "react-i18next"
+import useProductAvailability from "@/lib/useProductAvailability";
+
+const StoreListItem = ({
+  id,
+  name,
+  placeId,
+  addressLineOne,
+  addressLineTwo,
+  city,
+  province,
+  postalCode,
+  country,
+  phone,
+  hours,
+  distance,
+  services = [],
+  isFocused,
+  handleFocus,
+  handleSelect,
+  requestedProducts = [],
+  locationProducts = [],
+}) => {
+  const { t } = useTranslation()
+
+  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${name}&destination_place_id=${placeId}`
+
+  const { availability, allAvailable, allStocked, noneStocked, noneAvailable, availabilitySummary } = useProductAvailability(locationProducts, requestedProducts)
+
+  const handleStoreSelected = (e) => {
+    e.stopPropagation()
+    handleSelect(id)
+  }
+
+  return (
+    <div
+      className={`bg-card border rounded-xl p-6 transition-all hover:shadow-lg cursor-pointer ${isFocused ? "ring-2 ring-primary shadow-lg" : ""
+        }`}
+      onClick={() => handleFocus(id)}
+    >
+      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
+        <div className="flex-1">
+          <div className="flex items-start justify-between gap-4 mb-3">
+            <div>
+              <h3 className="font-bold text-lg text-left mb-1">{name}</h3>
+            </div>
+          </div>
+
+          <div className="space-y-2 text-sm">
+            <div className="flex items-start gap-2">
+              <MapPin className="w-4 h-4 text-muted-foreground mt-0.5 shrink-0" />
+              <div>
+                <p className="font-medium text-left">{addressLineOne}</p>
+                <p className="text-muted-foreground text-left">{city}, {province} {postalCode}</p>
+                <p className="text-primary font-medium mt-1 text-left">{t('default:distance_away', { distance: metersToMiles(distance).toFixed(1), distanceUnit: 'miles' })}</p>
+              </div>
+            </div>
+
+            <div className="flex items-top gap-2">
+              <div className="mt-2.5">
+                <Clock className="w-4 h-4 text-muted-foreground" />
+              </div>
+              <span className="text-muted-foreground"><CollapsibleStoreHours hours={hours} /></span>
+            </div>
+          </div>
+
+          {availabilitySummary === 'allStocked' &&
+            <div className="flex items-center shrink mt-3 px-3 py-1 bg-green-50 text-green-600 text-xs font-medium rounded-full">
+              <CheckCheck className="w-4 h-4 text-green-600 me-1" />
+              All Items Stocked
+            </div>
+          }
+
+          {availabilitySummary === 'allAvailable' &&
+            <div
+              className="flex items-center shrink mt-3 px-3 py-1 bg-orange-50 text-orange-600 text-xs font-medium rounded-full"
+            >
+              <Info className="w-4 me-1 h-4 text-orange-600" />
+              Available by Special Order
+            </div>
+          }
+
+          {availabilitySummary === 'mixed' &&
+            <div >
+              <div className="flex items-center gap-2 mt-4 text-sm">
+                <span className="font-bold w-28 text-wrap">Braxton</span>
+                <span
+                  className="flex items-center px-3 py-1 bg-orange-50 text-orange-600 text-xs font-medium rounded-full"
+                >
+                  <Info className="w-4 me-1 h-4 text-orange-600" />
+                  Special Order
+                </span>
+              </div>
+              <div className="flex items-center gap-2 mt-4 text-sm">
+                <span className="font-bold w-28 text-wrap">Juno</span>
+                <span
+                  className="flex items-center px-3 py-1 bg-green-50 text-green-600 text-xs font-medium rounded-full"
+                >
+                  <CheckCheck className="w-4 me-1 h-4 text-green-600" />
+                  Stocked
+                </span>
+              </div>
+            </div>
+          }
+
+          <div className="flex flex-wrap gap-2 mt-4">
+            {services.map((service) => (
+              <span
+                key={service}
+                className="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full"
+              >
+                {service}
+              </span>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex md:flex-col gap-2">
+          <Button onClick={handleStoreSelected} variant="default" className="whitespace-nowrap">
+            {t('default:select_store')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default StoreListItem

package/src/components/QuoteLeadForm/index.jsx

@@ -0,0 +1,16 @@
+import LeadForm from '@/components/LeadForm'
+import { useQuoteForm } from '@/contexts/quote-form'
+
+const QuoteLeadForm = ({ onClose, onSuccess }) => {
+
+  const { organizationId, location, selectedStoreId, products } = useQuoteForm()
+
+  const handleSuccess = (formValues, lead) => {
+    onSuccess && onSuccess({ formValues, lead })
+  }
+  return (
+    <LeadForm onClose={onClose} products={products} activityType="LeadActivity::QuoteRequest" onSuccess={handleSuccess} location={location} organizationId={organizationId} selectedLocationId={selectedStoreId} />
+  )
+}
+
+export default QuoteLeadForm

package/src/components/QuoteMap/index.jsx

@@ -0,0 +1,96 @@
+// The import part of the map is that you need to let the map managed its own center
+// and zoom state internally. Using external state management (like React state) can lead to
+// performance issues and a suboptimal user experience.
+import { useEffect, useState, useRef } from 'react'
+import { Map, useMap } from '@vis.gl/react-google-maps'
+import QuoteMapMarker from '@/components/QuoteMapMarker'
+import { useQuoteForm } from '@/contexts/quote-form'
+
+const QuoteMap = () => {
+
+  const { location, stores, focusedStoreId, setFocusedStoreId, setSelectedStoreId, setStepIndex } = useQuoteForm()
+  const map = useMap()
+
+  const zoomIn = () => {
+    if (!map) return;
+    const currentZoom = map.getZoom();
+    map.setZoom(currentZoom + 1);
+  }
+
+  const zoomOut = () => {
+    if (!map) return;
+    const currentZoom = map.getZoom();
+    map.setZoom(currentZoom - 1);
+  }
+
+  useEffect(() => {
+    if (!map) return;
+    if (location?.latitude && location?.longitude) {
+      map.panTo({ lat: location.latitude, lng: location.longitude })
+      map.setZoom(9)
+    }
+  }, [location, map]);
+
+  useEffect(() => {
+    if (!map || !focusedStoreId) return;
+    const focusedStore = stores.find(store => store.id === focusedStoreId)
+    if (focusedStore && focusedStore.address) {
+      map.panTo({ lat: focusedStore.address.latitude * 1, lng: focusedStore.address.longitude * 1 })
+    }
+  }, [focusedStoreId, stores, map]);
+
+  const handleMarkerClick = (storeId) => {
+    setFocusedStoreId(storeId)
+  }
+
+  const handleMarkerSelect = (storeId) => {
+    setSelectedStoreId(storeId)
+    setStepIndex(1)
+  }
+
+  return (
+    <div className="relative">
+      <div className="bg-muted rounded-xl overflow-hidden border shadow-md h-[300px]">
+        {/* Map placeholder - Replace with actual map integration (Google Maps, Mapbox, etc.) */}
+        <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-primary/5 to-muted">
+          <div className="text-center w-full">
+
+            <Map
+              style={{ width: '100%', height: '300px' }}
+              defaultCenter={{ lat: 22.54992, lng: 0 }}
+              defaultZoom={3}
+              gestureHandling='greedy'
+              disableDefaultUI
+              mapId="b1e4f5f5f8c7e2d9"
+            >
+              {stores.map((store) => (
+                <QuoteMapMarker key={store.id} store={store} isSelected={focusedStoreId === store.id} onClick={handleMarkerClick} onSelect={handleMarkerSelect} />
+              ))}
+            </Map>
+          </div>
+        </div>
+
+        {/* Map controls overlay */}
+        <div className="absolute top-4 right-4 flex flex-col gap-2">
+          <button className="bg-card border shadow-md rounded-lg p-2 hover:bg-accent transition-colors" onClick={zoomIn}>
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+            </svg>
+          </button>
+          <button className="bg-card border shadow-md rounded-lg p-2 hover:bg-accent transition-colors" onClick={zoomOut}>
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Results count badge */}
+        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-card border shadow-lg rounded-full px-4 py-2 text-sm font-medium">
+          <span className="text-primary">{stores.length}</span> stores found
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default QuoteMap

package/src/components/QuoteMapMarker/index.jsx

@@ -0,0 +1,56 @@
+import { useState, useCallback } from 'react'
+import { MapPin, Navigation } from 'lucide-react'
+import { AdvancedMarker, InfoWindow, useAdvancedMarkerRef } from '@vis.gl/react-google-maps'
+import { Button } from "@/components/ui/button"
+import { info } from 'autoprefixer'
+
+const StoreLocatorMapMarker = ({ store, isSelected, onClick, onSelect }) => {
+
+  const [infoWindowShown, setInfoWindowShown] = useState(false)
+  const [markerRef, marker] = useAdvancedMarkerRef()
+
+  const handleMarkerClick = useCallback(() => {
+    onClick && onClick(store.id)
+  }, [store.id, onClick])
+
+  const handleClose = useCallback(() => setInfoWindowShown(false), [])
+
+  const showInfoWindow = isSelected
+
+  const handleSelectClick = (e) => {
+    e.stopPropagation()
+    onSelect && onSelect(store.id)
+  }
+
+  return (
+    <AdvancedMarker
+      position={{
+        lat: store.address?.latitude * 1,
+        lng: store.address?.longitude * 1,
+      }}
+      ref={markerRef}
+      title={store.name}
+      onClick={handleMarkerClick}
+    >
+      <MapPin className={`w-8 h-8 hover:cursor-pointer ${isSelected ? 'text-primary fill-white z-10' : 'z-1 fill-white text-muted-foreground'}`} size={32} />
+      {showInfoWindow && (
+        <InfoWindow anchor={marker} headerContent={<h3 className="font-bold text-sm align-center text-left mb-2">{store.retailer_name}</h3>} onClose={handleClose}>
+          <p className="text-xs text-left text-muted-foreground">
+            {store.address?.street_line_one}
+            {store.address?.street_line_two ? `, ${store.address?.street_line_two}` : ''}
+          </p>
+          <p className="text-xs text-left text-muted-foreground mb-2">
+            {store.address?.city}, {store.address?.province} {store.address?.postal_code}
+          </p>
+          <div className="flex flex-row gap-2 mb-1">
+            <Button className="flex-1 md:flex-row" size="sm" onClick={handleSelectClick}>
+              Select
+            </Button>
+          </div>
+        </InfoWindow>
+      )}
+    </AdvancedMarker>
+  )
+}
+
+export default StoreLocatorMapMarker

package/src/components/StaticMap/index.jsx

@@ -0,0 +1,24 @@
+const StaticMap = ({ center, zoom, size = "400x600", markers }) => {
+
+  // https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&signature=YOUR_SIGNATURE
+  const params = new URLSearchParams()
+  params.append('center', center)
+  params.append('zoom', zoom)
+  params.append('size', size)
+  params.append('maptype', 'roadmap')
+
+  markers.forEach(marker => {
+    const markerParam = `${marker.lat},${marker.lng}`
+    params.append('markers', markerParam)
+  })
+
+  // Note: Replace 'YOUR_API_KEY' with an actual Google Maps Static API key
+  params.append('key', 'AIzaSyAnJmWEU1r63DiRWHkjczxzHyIEq3dhj4M')
+
+  const src = `https://maps.googleapis.com/maps/api/staticmap?${params.toString()}`
+  return (
+    <img src={src} alt="Static Map" />
+  )
+}
+
+export default StaticMap