6ee9de6dd8
* add automation cateogry for n8n and zapier * fix border radius for seperated apps * create app specific settings in installed apps * Fixed design issues caused by app settings * add first version of template cards with logos * Add link to zapier template * Add missing translations * fix mobile view * better readable app description in mobile view * code clean up * fix issue that lisItem was always expanded * code clean up * code clean up * fix import * fix typo * code clean up * add missing alt to img * use FiShare2 icon instead of FiZap * Remove duplicate entries Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import React, { ComponentProps } from "react";
|
|
|
|
import { InstalledAppVariants } from "@calcom/app-store/utils";
|
|
import { trpc } from "@calcom/trpc/react";
|
|
|
|
import { Icon } from "../../../Icon";
|
|
import Shell from "../Shell";
|
|
import type { HorizontalTabItemProps } from "../navigation/tabs/HorizontalTabItem";
|
|
import HorizontalTabs from "../navigation/tabs/HorizontalTabs";
|
|
import type { VerticalTabItemProps } from "../navigation/tabs/VerticalTabItem";
|
|
import VerticalTabs from "../navigation/tabs/VerticalTabs";
|
|
|
|
const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
|
|
{
|
|
name: "calendar",
|
|
href: "/apps/installed/calendar",
|
|
icon: Icon.FiCalendar,
|
|
},
|
|
{
|
|
name: "conferencing",
|
|
href: "/apps/installed/conferencing",
|
|
icon: Icon.FiVideo,
|
|
},
|
|
{
|
|
name: "payment",
|
|
href: "/apps/installed/payment",
|
|
icon: Icon.FiCreditCard,
|
|
},
|
|
{
|
|
name: "automation",
|
|
href: "/apps/installed/automation",
|
|
icon: Icon.FiShare2,
|
|
},
|
|
{
|
|
name: "analytics",
|
|
href: "/apps/installed/analytics",
|
|
icon: Icon.FiBarChart,
|
|
},
|
|
{
|
|
name: "other",
|
|
href: "/apps/installed/other",
|
|
icon: Icon.FiGrid,
|
|
},
|
|
];
|
|
|
|
export default function InstalledAppsLayout({
|
|
children,
|
|
...rest
|
|
}: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
|
|
const query = trpc.useQuery([
|
|
"viewer.integrations",
|
|
{ variant: InstalledAppVariants.payment, onlyInstalled: true },
|
|
]);
|
|
let actualTabs = tabs;
|
|
if (query.data?.items.length === 0) {
|
|
actualTabs = tabs.filter((tab) => tab.name !== InstalledAppVariants.payment);
|
|
}
|
|
return (
|
|
<Shell {...rest}>
|
|
<div className="flex flex-col p-2 md:p-0 xl:flex-row">
|
|
<div className="hidden xl:block">
|
|
<VerticalTabs tabs={actualTabs} sticky linkProps={{ shallow: true }} />
|
|
</div>
|
|
<div className="block xl:hidden">
|
|
<HorizontalTabs tabs={actualTabs} linkProps={{ shallow: true }} />
|
|
</div>
|
|
<main className="w-full xl:mx-5 xl:w-4/5 xl:pr-5">{children}</main>
|
|
</div>
|
|
</Shell>
|
|
);
|
|
}
|
|
export const getLayout = (page: React.ReactElement) => <InstalledAppsLayout>{page}</InstalledAppsLayout>;
|