132 lines
3.8 KiB
TypeScript
132 lines
3.8 KiB
TypeScript
import Link from "next/link";
|
|
import { createElement } from "react";
|
|
|
|
import classNames from "@calcom/lib/classNames";
|
|
|
|
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 (
|
|
<ul
|
|
{...props}
|
|
className={classNames(
|
|
"-mx-4 rounded-sm sm:mx-0 sm:overflow-hidden ",
|
|
// Add rounded top and bottome if roundContainer is true
|
|
props.roundContainer && "[&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md ",
|
|
!props.noBorderTreatment &&
|
|
"border-subtle divide-subtle divide-y rounded-md border border-l border-r ",
|
|
props.className
|
|
)}>
|
|
{props.children}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
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"
|
|
),
|
|
},
|
|
props.children
|
|
);
|
|
|
|
return href ? (
|
|
<Link passHref href={href} legacyBehavior>
|
|
{element}
|
|
</Link>
|
|
) : (
|
|
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 = <div />, className = "" } = props;
|
|
let subHeading = props.subHeading;
|
|
if (!subHeading) {
|
|
subHeading = "";
|
|
}
|
|
return (
|
|
<li
|
|
className={classNames(
|
|
"group flex w-full items-center justify-between p-5",
|
|
className,
|
|
disabled ? "hover:bg-muted" : ""
|
|
)}>
|
|
<Link
|
|
passHref
|
|
href={href}
|
|
className={classNames(
|
|
"text-default flex-grow truncate text-sm",
|
|
disabled ? "pointer-events-none cursor-not-allowed opacity-30" : ""
|
|
)}>
|
|
<h1 className="text-sm font-semibold leading-none">{heading}</h1>
|
|
<h2 className="min-h-4 mt-2 text-sm font-normal leading-none">
|
|
{subHeading.substring(0, 100)}
|
|
{subHeading.length > 100 && "..."}
|
|
</h2>
|
|
<div className="mt-2">{children}</div>
|
|
</Link>
|
|
{actions}
|
|
</li>
|
|
);
|
|
}
|
|
|
|
export function ListItemTitle<TComponent extends keyof JSX.IntrinsicElements = "span">(
|
|
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),
|
|
},
|
|
props.children
|
|
);
|
|
}
|
|
|
|
export function ListItemText<TComponent extends keyof JSX.IntrinsicElements = "span">(
|
|
props: JSX.IntrinsicElements[TComponent] & { component?: TComponent }
|
|
) {
|
|
const { component = "span", ...passThroughProps } = props;
|
|
|
|
return createElement(
|
|
component,
|
|
{
|
|
...passThroughProps,
|
|
className: classNames("text-sm text-subtle truncate", props.className),
|
|
},
|
|
props.children
|
|
);
|
|
}
|