cal.diy/packages/ui/v2/PageHeader.tsx

import { ReactNode } from "react";

import Badge, { badgeClassNameByVariant } from "./Badge";

type Props = {
  title: string;
  description?: string;
  badgeText?: string;
  badgeVariant?: keyof typeof badgeClassNameByVariant;
  infoIcon?: string;
  rightAlignedComponent?: ReactNode;
};

function PageHeader({ title, description, rightAlignedComponent, badgeText, badgeVariant }: Props) {
  return (
    <div className="flex items-center">
      <div className="mr-4 flex-col">
        <div className="flex w-full items-center space-x-2">
          <h1 className="font-cal text-xl font-semibold text-black">{title}</h1>
          {badgeText && badgeVariant && <Badge variant={badgeVariant}>{badgeText}</Badge>}
        </div>
        <h2 className="text-sm text-gray-600">{description}</h2>
      </div>
      <div className="ml-auto ">{rightAlignedComponent && rightAlignedComponent}</div>
    </div>
  );
}

export default PageHeader;