import { getEventLocationType, getTranslatedLocation } from "@calcom/app-store/locations"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Tooltip } from "@calcom/ui"; import { MapPin } from "@calcom/ui/components/icon"; import { classNames } from "@calcom/lib"; import type { PublicEvent } from "../../types"; import { EventMetaBlock } from "./Details"; export const EventLocations = ({ event }: { event: PublicEvent }) => { const { t } = useLocale(); const locations = event.locations; if (!locations?.length) return null; const getLocationToDisplay = (location: PublicEvent["locations"][number]) => { const eventLocationType = getEventLocationType(location.type); const translatedLocation = getTranslatedLocation(location, eventLocationType, t); return translatedLocation; }; const eventLocationType = getEventLocationType(locations[0].type); const icon = (locations.length > 1 || !eventLocationType?.iconUrl) ? MapPin : eventLocationType.iconUrl; return ( {locations.length === 1 && (
{getLocationToDisplay(locations[0])}
)} {locations.length > 1 && (

{t("select_on_next_step")}

    {locations.map((location, index) => (
  • {`${getEventLocationType(location.type)?.label} {getLocationToDisplay(location)}
  • ))}
}> {t("num_locations", { num: locations.length })}
)}
); };