71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
import { classNames } from "@calcom/lib";
|
|
import { useCopy } from "@calcom/lib/hooks/useCopy";
|
|
import type { BadgeProps } from "@calcom/ui";
|
|
import { Badge, Button, Label } from "@calcom/ui";
|
|
import { ClipboardCheck, Clipboard } from "@calcom/ui/components/icon";
|
|
|
|
type DisplayInfoType<T extends boolean> = {
|
|
label: string;
|
|
value: T extends true ? string[] : string;
|
|
asBadge?: boolean;
|
|
isArray?: T;
|
|
displayCopy?: boolean;
|
|
badgeColor?: BadgeProps["variant"];
|
|
} & (T extends false
|
|
? { displayCopy?: boolean; displayCount?: never }
|
|
: { displayCopy?: never; displayCount?: number }); // Only show displayCopy if its not an array is false
|
|
|
|
export function DisplayInfo<T extends boolean>({
|
|
label,
|
|
value,
|
|
asBadge,
|
|
isArray,
|
|
displayCopy,
|
|
displayCount,
|
|
badgeColor,
|
|
}: DisplayInfoType<T>) {
|
|
const { copyToClipboard, isCopied } = useCopy();
|
|
const values = (isArray ? value : [value]) as string[];
|
|
|
|
return (
|
|
<div className="flex flex-col">
|
|
<Label className="text-subtle mb-1 text-xs font-semibold uppercase leading-none">
|
|
{label} {displayCount && `(${displayCount})`}
|
|
</Label>
|
|
<div className={classNames(asBadge ? "mt-0.5 flex space-x-2" : "flex flex-col")}>
|
|
<>
|
|
{values.map((v) => {
|
|
const content = (
|
|
<span
|
|
className={classNames(
|
|
"text-emphasis inline-flex items-center gap-1 font-normal leading-5",
|
|
asBadge ? "text-xs" : "text-sm"
|
|
)}>
|
|
{v}
|
|
{displayCopy && (
|
|
<Button
|
|
size="sm"
|
|
variant="icon"
|
|
onClick={() => copyToClipboard(v)}
|
|
color="minimal"
|
|
className="text-subtle rounded-md"
|
|
StartIcon={isCopied ? ClipboardCheck : Clipboard}
|
|
/>
|
|
)}
|
|
</span>
|
|
);
|
|
|
|
return asBadge ? (
|
|
<Badge variant={badgeColor} size="sm">
|
|
{content}
|
|
</Badge>
|
|
) : (
|
|
content
|
|
);
|
|
})}
|
|
</>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|