Files
calendar/apps/web/components/booking/AvailableEventLocations.tsx
T
sean-brydonandGitHub 015ed6d4f9 Public Booking Pages (#4063)
* Teams + /book

* Consitant hoverstate across event-type cards

* Fix darkmode hover on book a team member

* Fix mobile wrapping

* Fix mobile looking awful with long links

* Fix storybook

* Fix SB

* Phone Input darkmode

* Location radio styles darkmode

* Off Topic: NIT add disable guests

* Update highlights on /book and [user]/[type]

* Fix preview URL

* Fix hover state

* Fix spacing for locations
2022-09-02 21:16:36 +00:00

36 lines
1.3 KiB
TypeScript

import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
import { classNames } from "@calcom/lib";
import { Props } from "./pages/AvailabilityPage";
export function AvailableEventLocations({ locations }: { locations: Props["eventType"]["locations"] }) {
return locations.length ? (
<div>
<div className="dark:text-darkgray-600 mr-6 flex w-full flex-col space-y-2 break-words text-sm text-gray-600">
{locations.map((location) => {
const eventLocationType = getEventLocationType(location.type);
if (!eventLocationType) {
// It's possible that the location app got uninstalled
return null;
}
return (
<div key={location.type} className="flex flex-row items-center text-sm font-medium">
<img
src={eventLocationType.iconUrl}
className={classNames(
"mr-[10px] ml-[2px] h-4 w-4 opacity-70 dark:opacity-100 ",
!eventLocationType.iconUrl?.includes("api") ? "dark:invert" : ""
)}
alt={`${eventLocationType.label} icon`}
/>
<span key={location.type}>{locationKeyToString(location)} </span>
</div>
);
})}
</div>
</div>
) : (
<></>
);
}