cal.pub0.org/packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx

57 lines
1.8 KiB
TypeScript

import Link from "next/link";
import { CAL_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { FiAlertCircle, FiArrowRight, FiCheck } from "@calcom/ui/components/icon";
const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean; appName: string }) => {
const { t } = useLocale();
return gCalInstalled ? (
<div className="rounded-md bg-gray-100 py-3 px-4">
<div className="items-start space-x-2.5">
<div className="flex items-start">
<div>
<FiCheck className="mt-1 mr-2 font-semibold" />
</div>
<div>
<span className="font-semibold">{t("google_calendar_is_connected")}</span>
<div>
<div>
<span>{t("requires_google_calendar")}</span>
</div>
</div>
</div>
</div>
</div>
</div>
) : (
<div className="rounded-md bg-blue-100 py-3 px-4 text-blue-900">
<div className="items-start space-x-2.5">
<div className="flex items-start">
<div>
<FiAlertCircle className="mt-1 mr-2 font-semibold" />
</div>
<div>
<span className="font-semibold">{t("this_app_requires_google_calendar", { appName })}</span>
<div>
<div>
<>
<Link
href={`${CAL_URL}/apps/google-calendar`}
className="flex items-center text-blue-900 underline">
<span className="mr-1">{t("connect_google_calendar")}</span>
<FiArrowRight />
</Link>
</>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default ExistingGoogleCal;