first commit

calcom/packages/ui/components/navigation/tabs/VerticalTabItem.tsx

@@ -0,0 +1,111 @@
+import Link from "next/link";
+import { Fragment } from "react";
+
+import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useUrlMatchesCurrentUrl } from "@calcom/lib/hooks/useUrlMatchesCurrentUrl";
+
+import { Icon, type IconName } from "../../..";
+import { Skeleton } from "../../skeleton";
+
+export type VerticalTabItemProps = {
+  name: string;
+  info?: string;
+  icon?: IconName;
+  disabled?: boolean;
+  children?: VerticalTabItemProps[];
+  textClassNames?: string;
+  className?: string;
+  isChild?: boolean;
+  hidden?: boolean;
+  disableChevron?: boolean;
+  href: string;
+  isExternalLink?: boolean;
+  linkShallow?: boolean;
+  linkScroll?: boolean;
+  avatar?: string;
+  iconClassName?: string;
+};
+
+const VerticalTabItem = ({
+  name,
+  href,
+  info,
+  isChild,
+  disableChevron,
+  linkShallow,
+  linkScroll,
+  ...props
+}: VerticalTabItemProps) => {
+  const { t } = useLocale();
+  const isCurrent = useUrlMatchesCurrentUrl(href);
+
+  return (
+    <Fragment key={name}>
+      {!props.hidden && (
+        <>
+          <Link
+            key={name}
+            href={href}
+            shallow={linkShallow}
+            scroll={linkScroll}
+            target={props.isExternalLink ? "_blank" : "_self"}
+            className={classNames(
+              props.textClassNames || "text-default text-sm font-medium leading-none",
+              "min-h-7 hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default group flex w-64 flex-row items-center rounded-md px-3 py-2 transition",
+              props.disabled && "pointer-events-none !opacity-30",
+              (isChild || !props.icon) && "ml-7 w-auto ltr:mr-5 rtl:ml-5",
+              !info ? "h-6" : "h-auto",
+              props.className
+            )}
+            data-testid={`vertical-tab-${name}`}
+            aria-current={isCurrent ? "page" : undefined}>
+            {props.icon && (
+              <Icon
+                name={props.icon}
+                className={classNames(
+                  "mr-2 h-[16px] w-[16px] stroke-[2px] ltr:mr-2 rtl:ml-2 md:mt-0",
+                  props.iconClassName
+                )}
+                data-testid="icon-component"
+              />
+            )}
+            <div className="h-fit">
+              <span className="flex items-center space-x-2 rtl:space-x-reverse">
+                <Skeleton title={t(name)} as="p" className="max-w-36 min-h-4 truncate">
+                  {t(name)}
+                </Skeleton>
+                {props.isExternalLink ? <Icon name="external-link" data-testid="external-link" /> : null}
+              </span>
+              {info && (
+                <Skeleton
+                  data-testid="apps-info"
+                  as="p"
+                  title={t(info)}
+                  className="max-w-44 mt-1 truncate text-xs font-normal">
+                  {t(info)}
+                </Skeleton>
+              )}
+            </div>
+            {!disableChevron && isCurrent && (
+              <div className="ml-auto self-center">
+                <Icon
+                  name="chevron-right"
+                  width={20}
+                  height={20}
+                  className="text-default h-auto w-[20px] stroke-[1.5px]"
+                  data-testid="chevron-right"
+                />
+              </div>
+            )}
+          </Link>
+          {props.children?.map((child) => (
+            <VerticalTabItem key={child.name} {...child} isChild />
+          ))}
+        </>
+      )}
+    </Fragment>
+  );
+};
+
+export default VerticalTabItem;