import Link from "next/link"; import { createElement } from "react"; import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Badge } from "../badge"; export type ListProps = { roundContainer?: boolean; // @TODO: Do we still need this? Coming from old v2 component. Prefer to delete it :) noBorderTreatment?: boolean; } & JSX.IntrinsicElements["ul"]; export function List(props: ListProps) { return ( ); } export type ListItemProps = { expanded?: boolean; rounded?: boolean } & ({ href?: never; } & JSX.IntrinsicElements["li"]); export function ListItem(props: ListItemProps) { const { href, expanded, rounded = true, ...passThroughProps } = props; const elementType = href ? "a" : "li"; const element = createElement( elementType, { ...passThroughProps, className: classNames( "items-center bg-default min-w-0 flex-1 flex border-neutral-200 p-4 sm:mx-0 md:border md:p-4 xl:mt-0 border-subtle", expanded ? "my-2 border" : "border -mb-px last:mb-0", // Pass rounded false to not round the corners -> Usefull when used in list we can use roundedContainer to create the right design rounded ? "rounded-md" : "rounded-none", props.className, (props.onClick || href) && "hover:bg-muted" ), "data-testid": "list-item", }, props.children ); return href ? ( {element} ) : ( element ); } export type ListLinkItemProps = { href: string; heading: string; subHeading: string; disabled?: boolean; actions?: JSX.Element; } & JSX.IntrinsicElements["li"]; export function ListLinkItem(props: ListLinkItemProps) { const { href, heading = "", children, disabled = false, actions =
, className = "" } = props; const { t } = useLocale(); let subHeading = props.subHeading; if (!subHeading) { subHeading = ""; } return (
  • {heading}

    {disabled && ( {t("readonly")} )}

    {subHeading.substring(0, 100)} {subHeading.length > 100 && "..."}

    {children}
    {actions}
  • ); } export function ListItemTitle( props: JSX.IntrinsicElements[TComponent] & { component?: TComponent } ) { const { component = "span", ...passThroughProps } = props; return createElement( component, { ...passThroughProps, className: classNames("text-sm font-medium text-emphasis truncate", props.className), "data-testid": "list-item-title", }, props.children ); } export function ListItemText( props: JSX.IntrinsicElements[TComponent] & { component?: TComponent } ) { const { component = "span", ...passThroughProps } = props; return createElement( component, { ...passThroughProps, className: classNames("text-sm text-subtle truncate", props.className), "data-testid": "list-item-text", }, props.children ); }