Files
calendar/packages/app-store/_components/AppNotInstalledMessage.tsx
T
46acac5dd8 fix: Better UI for the setup page, When trying to reach an app that hasn't been already installed under an account (#16121)
* Better UI for the setup page

* Added comment

* Delete packages/prisma/.env

* fixed env file

* Delete yarn.lock

* some changes

* revert yarn.lock

* revert translation and update

* final update

* some improvement

* fix: breaking on small screen, design refactor

---------

Co-authored-by: unknown <adhabal2002@gmail.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Co-authored-by: Amit Sharma <74371312+Amit91848@users.noreply.github.com>
2024-08-08 12:17:06 +02:00

30 lines
1.1 KiB
TypeScript

import Link from "next/link";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Icon } from "@calcom/ui";
export default function AppNotInstalledMessage({ appName }: { appName: string }) {
const { t } = useLocale();
return (
<div className="flex h-full w-full items-center justify-center">
<div className="bg-default flex max-w-lg flex-col items-center rounded-xl border px-8 py-14 text-center shadow-md">
<div className="mb-5 rounded-full bg-gray-100 p-3 dark:bg-[#292929] ">
<Icon name="circle-alert" className="h-9 w-9 p-0.5" strokeWidth={1.5} />
</div>
<h3 className="font-cal mb-2 text-2xl font-semibold">{t("app_not_installed")}</h3>
<p className="text-subtle px-1 leading-normal">{t("visit_our_app_store")}</p>
<div className="mt-5">
<Link href={`/apps/${appName}`} passHref={true} legacyBehavior>
<Button type="button" color="secondary">
{t("go_to_app_store")}
<Icon name="arrow-up-right" className="ml-1" size={20} />
</Button>
</Link>
</div>
</div>
</div>
);
}