import { useRouter } from "next/router"; import { WEBAPP_URL } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Avatar, Button, Dropdown, DropdownItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, } from "@calcom/ui"; import { Plus } from "@calcom/ui/components/icon"; export interface Option { teamId: number | null | undefined; // if undefined, then it's a profile label: string | null; image?: string | null; slug: string | null; } interface CreateBtnProps { options: Option[]; createDialog?: () => JSX.Element; createFunction?: (teamId?: number) => void; subtitle?: string; buttonText?: string; isLoading?: boolean; disableMobileButton?: boolean; } export function CreateButton(props: CreateBtnProps) { const { t } = useLocale(); const router = useRouter(); const CreateDialog = props.createDialog ? props.createDialog() : null; const hasTeams = !!props.options.find((option) => option.teamId); // inject selection data into url for correct router history const openModal = (option: Option) => { const query = { ...router.query, dialog: "new", eventPage: option.slug, teamId: option.teamId, }; if (!option.teamId) { delete query.teamId; } router.push( { pathname: router.pathname, query, }, undefined, { shallow: true } ); }; return ( <> {!hasTeams ? ( ) : (
{props.subtitle}
{props.options.map((option) => ( ( )} onClick={() => !!CreateDialog ? openModal(option) : props.createFunction ? props.createFunction(option.teamId || undefined) : null }> {" "} {/*improve this code */} {option.label} ))}
)} {router.query.dialog === "new" && CreateDialog} ); }