30 lines
939 B
TypeScript
30 lines
939 B
TypeScript
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;
|