import dayjs from "@calcom/dayjs"; import { classNames } from "@calcom/lib"; import type { CalendarEvent } from "../../types/events"; type EventProps = { event: CalendarEvent; currentlySelectedEventId?: number; eventDuration: number; onEventClick?: (event: CalendarEvent) => void; disabled?: boolean; }; export function Event({ event, currentlySelectedEventId, eventDuration, disabled, onEventClick, }: EventProps) { const selected = currentlySelectedEventId === event.id; const Component = onEventClick ? "button" : "div"; return ( onEventClick?.(event)} // Note this is not the button event. It is the calendar event. className={classNames( "group flex h-full w-full flex-col overflow-y-auto rounded-[4px] px-[6px] py-1 text-xs font-semibold leading-5 ", event.status === "ACCEPTED" && !selected && "bg-subtle hover:bg-emphasis text-emphasis border-[1px] border-gray-900", event.status === "PENDING" && !selected && "bg-default text-emphasis border-[1px] border-dashed border-gray-900", selected && "bg-inverted text-inverted border-[1px] border-transparent", disabled ? "hover:cursor-default" : "hover:cursor-pointer" )}>
{event.title}
{eventDuration >= 30 && (

{dayjs(event.start).format("HH:mm")} - {dayjs(event.end).format("HH:mm")}

)}
); }