2022-11-15 19:33:59 +00:00
|
|
|
import classNames from "classnames";
|
2023-06-17 01:06:04 +00:00
|
|
|
import type { ComponentType, ReactNode } from "react";
|
2022-11-15 19:33:59 +00:00
|
|
|
|
2023-06-17 01:06:04 +00:00
|
|
|
import type { LucideIcon, LucideProps } from "@calcom/ui/components/icon";
|
2023-08-25 12:50:39 +00:00
|
|
|
import { AlertTriangle, Info } from "@calcom/ui/components/icon";
|
2022-12-19 17:37:20 +00:00
|
|
|
|
2022-11-15 19:33:59 +00:00
|
|
|
export type TopBannerProps = {
|
2023-06-17 01:06:04 +00:00
|
|
|
Icon?: ComponentType<LucideProps> & LucideIcon;
|
2022-11-15 19:33:59 +00:00
|
|
|
text: string;
|
|
|
|
variant?: keyof typeof variantClassName;
|
|
|
|
actions?: ReactNode;
|
|
|
|
};
|
|
|
|
|
|
|
|
const variantClassName = {
|
|
|
|
default: "bg-gradient-primary",
|
|
|
|
warning: "bg-orange-400",
|
|
|
|
error: "bg-red-400",
|
|
|
|
};
|
|
|
|
|
2023-06-17 01:06:04 +00:00
|
|
|
const defaultIconProps = {
|
|
|
|
className: "text-emphasis h-4 w-4 stroke-[2.5px]",
|
|
|
|
"aria-hidden": "true",
|
2023-06-19 11:28:49 +00:00
|
|
|
} as LucideProps;
|
2023-06-17 01:06:04 +00:00
|
|
|
|
2022-11-15 19:33:59 +00:00
|
|
|
export function TopBanner(props: TopBannerProps) {
|
2023-08-25 12:50:39 +00:00
|
|
|
const { Icon, variant = "default", text, actions } = props;
|
2023-06-17 01:06:04 +00:00
|
|
|
|
|
|
|
const renderDefaultIconByVariant = () => {
|
|
|
|
switch (variant) {
|
|
|
|
case "error":
|
2023-08-25 12:50:39 +00:00
|
|
|
return <AlertTriangle {...defaultIconProps} data-testid="variant-error" />;
|
2023-06-17 01:06:04 +00:00
|
|
|
case "warning":
|
2023-08-25 12:50:39 +00:00
|
|
|
return <Info {...defaultIconProps} data-testid="variant-warning" />;
|
2023-06-17 01:06:04 +00:00
|
|
|
default:
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const defaultIcon = renderDefaultIconByVariant();
|
|
|
|
|
2022-11-15 19:33:59 +00:00
|
|
|
return (
|
|
|
|
<div
|
|
|
|
data-testid="banner"
|
|
|
|
className={classNames(
|
2023-06-22 22:25:37 +00:00
|
|
|
"flex min-h-[40px] w-full items-start justify-between gap-8 px-4 py-2 text-center lg:items-center",
|
2022-11-15 19:33:59 +00:00
|
|
|
variantClassName[variant]
|
|
|
|
)}>
|
2022-12-08 18:42:55 +00:00
|
|
|
<div className="flex flex-1 flex-col items-start justify-center gap-2 p-1 lg:flex-row lg:items-center">
|
2023-04-05 18:14:46 +00:00
|
|
|
<p className="text-emphasis flex flex-col items-start justify-center gap-2 text-left font-sans text-sm font-medium leading-4 lg:flex-row lg:items-center">
|
2023-08-25 12:50:39 +00:00
|
|
|
{Icon ? <Icon data-testid="variant-default" {...defaultIconProps} /> : defaultIcon}
|
2022-11-15 19:33:59 +00:00
|
|
|
{text}
|
|
|
|
</p>
|
2022-12-19 17:37:20 +00:00
|
|
|
{actions && <div className="text-sm font-medium">{actions}</div>}
|
2022-11-15 19:33:59 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|