cfa720a523
* init page * init insights frontend * nit * nit * nit * merge * fixed icons * i18n, needs features * Init insights trpc * Using trpc on client * Added events timeline * Seed analytics script * connect ui with trpc * Added and fixed event time lines * WIP popular days and avg time duration event type * added new metric graphs * improved upgrade tip * always show upgrade screen * upgrade tremor.so and select inputs for page * Remove log * Move everything to components and add context * Fix select types using calcom ui one * Adding translations * Add missing translations * Add more translations * min fix * Fixes for date select * Prefer early return and mobile design fixes * Fix style for mobile * Fix data with userId filter from popular events * add user id to average time duration * Removed submodules * Delete website * Update yarn.lock * Code organization and type fixes * trpc fixes * Builds are now passing * Relocates server code * Cleanup * Medium size screen fixes * Added TODO --------- Co-authored-by: Alan <alannnc@gmail.com> Co-authored-by: zomars <zomars@me.com>
68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import Image from "next/image";
|
|
import type { ReactNode } from "react";
|
|
|
|
import { classNames } from "@calcom/lib";
|
|
import { IS_SELF_HOSTED } from "@calcom/lib/constants";
|
|
import { useHasTeamPlan } from "@calcom/lib/hooks/useHasPaidPlan";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { EmptyScreen } from "@calcom/ui";
|
|
import { FiUsers } from "@calcom/ui/components/icon";
|
|
|
|
export function UpgradeTip({
|
|
dark,
|
|
title,
|
|
emptyTitle,
|
|
emptyDescription,
|
|
description,
|
|
background,
|
|
features,
|
|
buttons,
|
|
isParentLoading,
|
|
children,
|
|
}: {
|
|
dark?: boolean;
|
|
title: string;
|
|
description: string;
|
|
/* overwrite EmptyScreen text */
|
|
emptyTitle?: string;
|
|
emptyDescription?: string;
|
|
background: string;
|
|
features: Array<{ icon: JSX.Element; title: string; description: string }>;
|
|
buttons?: JSX.Element;
|
|
/**Chldren renders when the user is in a team */
|
|
children: JSX.Element;
|
|
isParentLoading?: ReactNode;
|
|
}) {
|
|
const { t } = useLocale();
|
|
const { isLoading, hasTeamPlan } = useHasTeamPlan();
|
|
|
|
if (hasTeamPlan) return children;
|
|
|
|
if (isParentLoading || isLoading) return <>{isParentLoading}</>;
|
|
|
|
return (
|
|
<>
|
|
<div className="relative flex justify-between w-full pb-10 min-h-[295px] items-center rounded-lg overflow-hidden">
|
|
<Image alt={title} src={background} className="absolute object-cover min-h-[295px] w-full rounded-lg" height={295} width={1118} quality={100} />
|
|
<div className="relative px-8 mt-4 sm:px-14">
|
|
<h1 className={classNames("font-cal text-3xl", dark && "text-white")}>{t(title)}</h1>
|
|
<p className={classNames("mt-4 mb-8 max-w-sm", dark ? "text-white" : "text-gray-700")}>
|
|
{t(description)}
|
|
</p>
|
|
{buttons}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid-cols-3 mt-4 md:grid md:gap-4">
|
|
{features.map((feature) => (
|
|
<div key={feature.title} className="mb-4 min-h-[180px] w-full rounded-md bg-gray-50 p-8 md:mb-0">
|
|
{feature.icon}
|
|
<h2 className="mt-4 text-lg font-cal">{feature.title}</h2>
|
|
<p className="text-gray-700">{feature.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|