54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import { useAutoAnimate } from "@formkit/auto-animate/react";
|
|
import { useMemo } from "react";
|
|
|
|
import { classNames as cs } from "@calcom/lib";
|
|
import { HorizontalTabs, VerticalTabs } from "@calcom/ui";
|
|
|
|
import getAppCategories from "../_utils/getAppCategories";
|
|
|
|
const AppCategoryNavigation = ({
|
|
baseURL,
|
|
children,
|
|
containerClassname,
|
|
className,
|
|
classNames,
|
|
useQueryParam = false,
|
|
}: {
|
|
baseURL: string;
|
|
children: React.ReactNode;
|
|
/** @deprecated use classNames instead */
|
|
containerClassname?: string;
|
|
/** @deprecated use classNames instead */
|
|
className?: string;
|
|
classNames?: {
|
|
root?: string;
|
|
container?: string;
|
|
verticalTabsItem?: string;
|
|
};
|
|
useQueryParam?: boolean;
|
|
}) => {
|
|
const [animationRef] = useAutoAnimate<HTMLDivElement>();
|
|
const appCategories = useMemo(() => getAppCategories(baseURL, useQueryParam), [baseURL, useQueryParam]);
|
|
|
|
return (
|
|
<div className={cs("flex flex-col gap-x-6 md:p-0 xl:flex-row", classNames?.root ?? className)}>
|
|
<div className="hidden xl:block">
|
|
<VerticalTabs
|
|
tabs={appCategories}
|
|
sticky
|
|
linkProps={{ shallow: true }}
|
|
itemClassname={classNames?.verticalTabsItem}
|
|
/>
|
|
</div>
|
|
<div className="block overflow-x-scroll xl:hidden">
|
|
<HorizontalTabs tabs={appCategories} linkProps={{ shallow: true }} />
|
|
</div>
|
|
<main className={classNames?.container ?? containerClassname} ref={animationRef}>
|
|
{children}
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AppCategoryNavigation;
|