import React from "react"; import Select from "react-select"; import { OptionProps } from "react-select"; import { InstallAppButton } from "@calcom/app-store/components"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import type { App } from "@calcom/types/App"; import { Button } from "@calcom/ui"; import { QueryCell } from "@lib/QueryCell"; interface AdditionalCalendarSelectorProps { isLoading?: boolean; } const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App["type"] }>) => { const { data } = optionProps; return ( { return ( ); }} /> ); }; const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorProps): JSX.Element | null => { const { t } = useLocale(); const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true }); return ( { const options = data.items.map((item) => ({ label: item.name, slug: item.slug, image: item.logo, type: item.type, })); return (