@shopgate/engage/locations/components/StoreList/StoreDistance.js

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import formatDistance from "../../helpers/formatDistance";
import { storeDistance } from "./Store.style";
import { jsx as _jsx } from "react/jsx-runtime";
export const UNIT_SYSTEM_METRIC = 'metric';
export const UNIT_SYSTEM_IMPERIAL = 'imperial';

/**
 * Renders a single store distance.
 * @param {Object} props The component props.
 * @param {number} props.distance The distance.
 * @param {string} props.unitSystem The unit system.
 * @returns {JSX.Element}
 */
export function StoreDistance({
  distance = null,
  unitSystem = UNIT_SYSTEM_METRIC
}) {
  if (distance === null) {
    return null;
  }
  return /*#__PURE__*/_jsx("span", {
    className: storeDistance,
    children: formatDistance(distance, unitSystem === UNIT_SYSTEM_IMPERIAL)
  });
}
StoreDistance.defaultProps = {
  distance: null,
  unitSystem: UNIT_SYSTEM_METRIC
};